庖丁解牛：阮一峰《ES6 入门》中箭头函数 this 指针剖析

引言

阮一峰在《ES6 入门》一书中对箭头函数 this 指针的引发了社区中关于箭头函数 this 的讨论。一些开发者认为阮一峰的过于简单，没有考虑到箭头函数在实际开发中的各种复杂情况。本文将对箭头函数 this 指针进行详细剖析，并提供示例和代码，帮助读者深入理解这一概念。

箭头函数概述

箭头函数是 ES6 中引入的新特性，它是一种简写函数语法，可以用来替代传统的函数声明和函数表达式。箭头函数的语法如下：

(参数列表) => { 函数体 }

箭头函数有以下几个特点：

• 箭头函数没有自己的this，它的this关键字总是继承自外层函数或全局对象。
• 箭头函数不能使用arguments对象，它只能使用参数列表中的参数。
• 箭头函数不能使用yield关键字，因此不能用作生成器函数。

箭头函数 this 指针

阮一峰在《ES6 入门》一书中对箭头函数 this 指针的描述如下：

箭头函数没有自己的this关键字，它的this关键字总是继承自外层函数或全局对象。

这句话的表述并不完全准确。在某些情况下，箭头函数的this关键字可能不会继承自外层函数或全局对象。例如，当箭头函数被用作回调函数时，它的this关键字可能会被绑定到调用它的对象。

为了更深入地理解箭头函数 this 指针，我们来看一个示例：

const person = {
  name: '张三',
  age: 20,
  sayHello: function() {
    console.log(this.name + '今年' + this.age + '岁了');
  }
};

const arrowFunction = () => {
  console.log(this.name + '今年' + this.age + '岁了');
};

person.sayHello(); // 张三今年20岁了
arrowFunction(); // undefined今年undefined岁了

在这个示例中，person.sayHello()方法中的this关键字指向person对象，因此输出结果为“张三今年20岁了”。而arrowFunction()函数中的this关键字指向全局对象，因此输出结果为“undefined今年undefined岁了”。

箭头函数 this 指针的特殊情况

在某些情况下，箭头函数的this关键字可能不会继承自外层函数或全局对象。例如，当箭头函数被用作回调函数时，它的this关键字可能会被绑定到调用它的对象。

为了更深入地理解这种情况，我们来看一个示例：

const button = document.getElementById('button');

button.addEventListener('click', () => {
  console.log(this);
});

在这个示例中，箭头函数被用作button元素的click事件处理程序。当用户点击button元素时，箭头函数中的this关键字指向button元素，因此输出结果为button元素。

结论

箭头函数的this关键字是一个比较复杂的概念，它可能会受到各种因素的影响。在实际开发中，我们应该根据具体情况来判断箭头函数的this关键字指向哪个对象。