Question

我正在学习Javascript中的this关键字。我正在尝试使用内部对象函数访问外部对象属性。例如：

var outer = {
    prop : 'prop',
    func : function(){
      return this.prop;
    },
    inner : {
      func : function(){
        return this.prop;
      }
    }
  }
  --> outer.func() : 'prop'
  --> outer.inner.func() : undefined

我理解为什么它不起作用，但我不知道如何访问外部对象的prop。

Answer 1

让函数属性的内部知道有关已分配给包含该属性的对象的变量名称的任何内容通常是一个非常糟糕的主意。它引入了不需要的依赖关系，更重要的是防止存在这样一个对象的多个实例。

另一个构造是下面显示的“模块模式”，使用闭包和允许任何嵌套属性访问该（本地）变量的变量。

var outer = (function() {
    var prop = 'prop';
    return {
        prop: prop,
        func: function() {
            return prop;
        },
        inner : {
            func : function() {
                return prop;
            }
        } 
    }
})();

Answer 2

var outer = {
    prop : 'prop',
    func : function(){
      return this.prop;
    },
    inner : {
      func : function(){
        return outer.prop;
      }
    }
  }

Answer 3

您可以使用outer的引用来访问道具。例如：

var outer = {
    prop : 'prop',
    test : function() {
       return this === outer;
    }, 
    func : function(){
      return this.prop;
    },
    inner : {
      func : function(){
        return outer.prop;
      },
      test: function() {
        return this === outer;
    }
  }
}

console.log(outer.func())  // prop
console.log(outer.test())  // true
console.log(outer.inner.func())  // prop
console.log(outer.inner.test()) // false

https://jsfiddle.net/gk2fegte/2/

当您在内部对象中调用this.prop时，它不会指向外部，而是指向inner对象。查看上面代码中的test函数。

Answer 4

您正在使用JavaScript对象文字和函数，以便＆＃34;这个＆＃34;关键字不同。你可以看到关于＆＃34;这个＆＃34;的更多细节。 How does "this" keyword work within a function?中的关键字。在你的情况下，使用＆＃34; outer.prop＆＃34;访问

如何使用内部对象函数Javascript访问外部对象属性

4 个答案: