Question

给出以下JavaScript代码：

({
  foo: 1,
  bar: 2,
  zoo: 3,
  test: function(i) {
    var g = function(i) {
        alert(i + zoo);
    }
    g(i);
  }
}).test(2);

为什么zoo中alert()未定义？我可以使用哪种语法正确引用zoo并获取值5的警报显示？

更新：我更倾向于解决方案，只有g的实施需要改变，如果可能的话。

Answer 1

使用箭头功能保存＆＃34;外部＆＃34;值this，并使用它来访问zoo属性的值：

({
  foo: 1,
  bar: 2,
  zoo: 3,
  test: function(i) {
    var g = i => alert(i + this.zoo);
    g(i);
  }
}).test(2);

Answer 2

zoo不是自由浮动变量，它是对象的属性。在test内，您可以使用this引用该对象（因为您调用它的方式）。在g内部，this上下文会丢失，因此您需要明确保留它：

test: function(i) {
    var g = function(i) {
        alert(i + this.zoo);
    }.bind(this);
    g(i);
}

或：

test: function(i) {
    var g = function(i) {
        alert(i + this.zoo);
    };
    g.call(this, i);
}

Answer 3

当您调用对象的成员函数时，this关键字将设置为该对象（除非您使用.call或.apply调用该函数）。函数g不再是对象的成员，因此this未设置为对象。如果您想继续使用g功能，可以选择几种方法。

设置对this：

的引用

test: function(i) {
    var that = this;
    var g = function(i) {
        alert(i + that.zoo);
    }
    g(i);
}

或使用this

手动设置.call的值

test: function(i) {
    var g = function(i) {
        alert(i + this.zoo);
    }
    g.call(this, i);
}

这里有关于.call和.apply的更多信息。

Answer 4

怎么样：

({
      foo: 1,
      bar: 2,
      zoo: 3,
      test: function(i) {
        var g = function(_this,i) {
            alert(i + _this.zoo);
        }
        g(this,i);
      }
    }).test(2);

如何引用外部成员

4 个答案: