javascript - 为什么 `this`指的是父函数的作用域

Question

我确实读到过 this 关键字可以引用全局范围或引用它的对象或事件绑定(bind)到的对象，但不理解以下行为.

function outer() {
  var inner = 4;

  function innerFunc() {
    var inner = 5;
    console.log('inner called with ' + this.inner);
  }
  return innerFunc;
}
var obj = outer();
obj();

为什么这个日志是 4 而不是 5。AFAIK this 应该引用它被引用的函数，并且应该通过 closure 可用。

Answer 1

TL;DR - this 没有像您认为的那样工作。

阅读更多 here , here和 here .

---

函数的 this(也称为上下文)是在调用时确定的，而不是在函数定义时确定的。众所周知，this 是动态绑定(bind)，闭包中的变量是词法绑定(bind)。

var obj = outer();
obj();

使用 this = window(或 global 在 Node.js 的情况下)调用 outer 因为你没有处于严格模式(否则, this = undefined). outer 不使用 this，因此这不会对其产生太大影响。

outer 然后返回一个函数 (innerFunc)，然后您将其分配给 obj。然后，您再次使用 this = window 调用 obj(因为您没有使用 .bind() 或 .call() 或 .apply() 指定任何其他内容)。

然后你记录 this.inner 这等同于 window.inner 是 undefined 除非你碰巧有一个名为 inner 具有一定的值(value)。

---

this 的值由调用者决定。

如果你像这样调用了obj:

obj.call({inner: 42}); // first argument to fn.call() is the context

无论函数是如何定义的，您都会在控制台中看到 42。

减轻这种情况并保持对 this 的控制的一种方法是使用 fn.bind()或 arrow function .