箭头函数this的指向问题

2020-06-14

面试时候的一道题：

var o = {}

o.foo = function foo() {
  console.log(this);
  return () => {
    console.log(this);
    return () => console.log(this)
  }
}

o.foo()()()

结果是输出三次 o 。第一个由于是 .方式的调用，this指向o。后面的this指向指向需要需要探究下。

MDN上关于箭头函数this指向的解释：

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。 (MDN)

个人理解：

箭头函数没有自己的this，它会 在声明的时候捕获作用域中的this，并后续不再改变 。

第二个输出（第一个箭头函数）的this在 o.foo() 时候声明，捕获了this（o）。

第三个输出（第二个箭头函数）的this在 o.foo()()时候生命，捕获了上一步的this（o）。

为了验证这一个想法我们再写一个demo测试：

var o = {};
var a = { id: "a" };
var b = { id: "b" };

o.foo = function foo() {
  console.log(this);
  return function () {
    console.log(this);
    return () => console.log(this);
  };
};

o.foo.bind(a)().bind(b)()();

结果输出 a b b。