ES6中箭头函数作为对象属性,this的指向问题

Question

看了阮大神ES6入门一书的时候，介绍箭头函数this

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。

网上也有云

箭头函数的this绑定看的是this所在的函数定义在哪个对象下，绑定到哪个对象则this就指向哪个对象

const Person = {
        'sayHello': () => {console.log(this)}
            };
      Person.sayHello();

这里的this为什么指向window?为什么不是外部代码块的Person对象的this.

Answer 1

你的代码等效为：

const func = () => {
  console.log(this);
};

const Person = {
  hello: func,
};

Person.hello();

那么自然就是 window 咯，声明函数的地方是 window 嘛。

Answer 2

更新

const person = {
    sayHello: () => console.log(this)
}

const Person = function() {
    this.sayHello = () => console.log(this)
}

const pI = new person()
// 报错: person is not a constructor

const PI = new Person()
PI.sayHello() 

---

你看看 Person:

再看看 window:

你不觉得这两个东西有哪里不太一样吗？

const Person = {
    // ...
}

这种形式，你只是定义了一个数据而不是对象，对象是要求有 constructor 构造器定义的。

Answer 3

使用对象字面量的时候，不要在其定义的方法里使用箭头函数，这属于箭头函数的禁忌。另外，可以看下下面的代码执行：

var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  },
  d() {
    console.log( this.i, this)  
  }
}
obj.b(); 
obj.c();
obj.d();