javascript - 仍然对 Javascript 中的闭包感到困惑，举例说明

Question

我是 Javascript 新手。现在我正在尝试理解闭包。在大多数常见情况下，它很容易理解。但仍然有一些非常令人困惑的事情。 这可能是关于 javascript 中的 this 的问题。我不确定。

这里有 3 个例子:1:

var name = "The Window";

var object = {
  name: "My Object",
  getNameFunc: function() {
    return this.name;
  }
};

console.log(object.getNameFunc()); // 'My Object'

2:

var name = "The Window";

var object = {
  name: "My Object",
  getNameFunc: function() {
    return function() {
      return this.name;
    };
  }
};

console.log(object.getNameFunc()()); // 'The Window'

最后一个:

var name = "The Window";

var object = {
  name: "My Object",
  getNameFunc: function() {
    var that = this;
    return function() {
      return that.name;
    };
  }
};

console.log(object.getNameFunc()()); // 'My Object'

第一个很容易理解。但为什么第二个返回 The Window 而第三个返回 My Object。

Answer 1

this 是一个特殊的关键字，不是普通的变量，并且它不保存在闭包中。因此，在第二个版本中，内部闭包不使用 getNameFunc() 接收到的 this 值，它默认为全局值，即 >窗口对象。

第三个版本之所以有效，是因为 that 是一个普通变量，因此它被保留在闭包中。

您可以像这样绑定(bind)函数:

var name = "The Window";

var object = {
  name: "My Object",
  getNameFunc: function() {
    return (function() {
      return this.name;
    }).bind(this);
  }
};

console.log(object.getNameFunc()()); // 'The Window'

或使用箭头函数:

var name = "The Window";

var object = {
  name: "My Object",
  getNameFunc: function() {
    return () => this.name;
  }
};

console.log(object.getNameFunc()()); // 'The Window'

有关详细信息，请参阅 How to access the correct `this` inside a callback?