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

可爱的蓝精灵
  • 5
新手上路,请多包涵

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

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

网上也有云

箭头函数的this绑定看的是this所在的函数定义在哪个对象下,绑定到哪个对象则this就指向哪个对象
const Person = {
        'sayHello': () => {console.log(this)}
            };
      Person.sayHello();

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

回复
阅读 2.7k
3 个回答

你的代码等效为:

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

const Person = {
  hello: func,
};

Person.hello();

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

krun
  • 6.9k

更新

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() 

clipboard.png


你看看 Person:

clipboard.png

再看看 window:

clipboard.png

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

const Person = {
    // ...
}

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

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

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(); 

宣传栏