解析 ES6 箭头函数的 this 关键字-JavaScript中文网-JavaScript教程资源分享门户

解析 ES6 箭头函数的 this 关键字

在传统的 JavaScript 函数中，this 关键字指向的是调用该函数的对象。然而在 ES6 中，箭头函数的 this 关键字有着不同的指向。本文将详细解析箭头函数的 this 关键字，让大家深入理解其用法以及注意事项。

为什么需要箭头函数

在 ES6 之前，JavaScript 中的函数只有两种：具名函数和匿名函数。在使用具名函数时，我们通常会定义一个变量来引用该函数，然后将该变量传递给其他函数，以供调用：

function sum(a, b) {
  return a + b;
}

var result = sum(1, 2);
console.log(result); // 3

但如果我们想使用匿名函数，则需要将其直接传递给调用函数，并直接执行：

var result = (function(a, b) { return a + b; })(1, 2);
console.log(result); // 3

这样写虽然比使用具名函数简短，但是较为不易读，也不便于维护。在 ES6 中，我们引入了一种新的函数类型——箭头函数。箭头函数既可以具名也可以匿名，如下：

// 具名箭头函数
const sum = (a, b) => a + b;

// 匿名箭头函数
const result = ((a, b) => a + b)(1, 2);

console.log(sum(1, 2)); // 3
console.log(result); // 3

可以看到，使用箭头函数可以更加简洁明了地表示函数的逻辑，而且就像上面那个例子一样，它还可以一行完成。

箭头函数的 this 关键字

在传统函数中，this 关键字的指向与调用该函数的对象有关。而在箭头函数中，this 关键字的指向与该函数所在的作用域有关。

例如，我们使用一个示例代码来说明这个问题：

var myObj = {
  myFunc: function() {
    console.log(this);
  }
};

myObj.myFunc(); // 输出 myObj 对象

在上面的代码中，我们调用了一个方法，myObj 对象的上下文被设置为 this。但是如果按照同样的方式来调用箭头函数，则会发现输出的 this 并不是 myObj 对象，而是函数所处的作用域，也就是全局对象：

var myObj = {
  myFunc: () => console.log(this)
};

myObj.myFunc(); // 输出全局对象

这是因为箭头函数没有自己的 this 绑定，它会继承当前执行上下文的 this 值。因此，在箭头函数中使用 this 与在调用它的作用域中使用 this 完全相同。这在编写复杂的函数时非常有用，可以避免由于 this 指向不正确而出现难以追踪的错误。

下面我们再来看一个示例：

var myObj = {
  myVar: 'foo',
  myFunc: function() {
    console.log(this.myVar);
  }
};

myObj.myFunc(); // 输出 foo

在上面的代码中，当调用 myFunc() 方法时，this 指向了 myObj 对象，从而正确地输出了 foo。但如果我们将 myFunc() 方法改为箭头函数，则会失败：

var myObj = {
  myVar: 'foo',
  myFunc: () => console.log(this.myVar)
};

myObj.myFunc(); // 输出 undefined

由于箭头函数没有自己的 this，因此 this.myVar 返回了 undefined。

如何确定箭头函数的 this 指向

在箭头函数中，this 关键字的指向是由其定义的上下文来决定的。因此，在确定箭头函数的 this 指向时，需要考虑箭头函数的定义位置以及所处的执行上下文。有以下两种情况：

全局作用域

在全局作用域中声明的箭头函数的 this 指向全局作用域对象 window。

const myFunc = () => console.log(this);
myFunc(); // 输出 window 对象

对象方法

当箭头函数用作对象方法时，this 关键字指向该对象本身，而不是作为其方法调用的对象。

var myObj = {
  myVar: 'foo',
  myFunc: () => console.log(this.myVar)
};

myObj.myFunc(); // 输出全局对象

在上述示例中，尽管 myFunc 是以对象方法的形式定义的，但其 this 关键字指向的是其定义时所处的执行上下文。如果我们改为使用传统函数，则会得到预期的结果：

var myObj = {
  myVar: 'foo',
  myFunc: function() {
    console.log(this.myVar);
  }
};

myObj.myFunc(); // 输出 foo

上面的代码正确地输出了 foo。

除此之外，在事件处理函数中，箭头函数可以很方便地获取到其定义时所在的执行上下文，如下所示：

<button onclick="myFunc()">点击我</button>

<script>
const myFunc = () => console.log(this);
</script>

在上述示例中，点击按钮时，最终会调用 myFunc 方法并输出全局对象。

总结

作为 ES6 的一种新特性，箭头函数可以简化代码，提高代码可读性，减少代码冗余。但是它与传统函数有很大的区别，需要注意其 this 关键字的指向问题。在使用箭头函数时，需要根据其定义位置以及所处的执行上下文来确定它的 this 关键字指向。只有正确地使用箭头函数，才能充分发挥其优势，避免出现难以追踪的错误。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6536a3587d4982a6ebec30c2