类中的箭头函数
类中的箭头函数 this 等于实例
class Person {constructor () {this.name = '章三'}handleClick1 = () => {console.log(this.name)return this}handleClick2 () {console.log(this.name)return this}}let person = new Person()console.log(person.handleClick1() === person) // trueconsole.log(person.handleClick2() === person) // true
我们发现上面代码中普通函数和箭头函数没什么区别，函数中的 this 都指向实例，但是我们再看看下面的代码。
class Person {constructor () {this.name = '章三'}handleClick1 = () => {console.log(this.name)return this}handleClick2 () {console.log(this.name)return this}}let person = new Person()let { handleClick1, handleClick2 } = personconsole.log(handleClick1() === person) // trueconsole.log(handleClick2() === person) // false
我好像理解了，又好像不理解。。。请听我细细道来！
类的方法内部如果含有 this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。
上面代码中，handleClick2 方法中的 this，默认指向 Person 类的实例。但是，如果将这个方法提取出来单独使用，this 会指向该方法运行时所在的环境（由于 class 内部是严格模式，所以 this 实际指向的是 undefined），从而导致找不到 name 属性而报错。
一个比较简单的解决方法是，在构造方法中绑定 this，这样就不会找不到 name 属性了。另一种解决方法是使用箭头函数，如 handleClick1 的写法。
在 handleClick1 函数中，箭头函数内部的 this 总是指向定义时所在的对象。上面代码中，箭头函数位于类内部，类本身就指向构造函数。这时，箭头函数所在的运行环境，肯定是实例对象，所以 this 会总是指向实例对象。