在 ECMAScript 2015 （ES6）中，引入了一个新的函数语法：箭头函数（Arrow functions）。箭头函数与传统的函数语法有一些区别，在某些情况下可以使代码更加简洁与优雅。
然而，箭头函数也存在一些需要注意的地方，其中之一就是 this 的作用域问题。在传统的函数语法中，this 的值在函数被调用时才确定；而在箭头函数中，this 的值在函数定义时就确定了，因此可能会导致一些意料之外的结果。
本篇文章将详细探讨箭头函数和 this 的作用域问题，并提供解决方法和示例代码。
箭头函数的语法
箭头函数的语法比传统的函数语法更加简洁，一般使用小括号包裹参数列表，紧随其后跟上箭头符号（=>），再加上函数体即可。
例如，以下代码定义了一个接收一个参数的箭头函数：
const square = x => x * x;
如果有多个参数，则需要使用小括号将参数列表括起来：
const add = (x, y) => x + y;
如果函数体包含多条语句，则需要使用花括号将函数体括起来，并使用 return 关键字返回值：
const sum = (x, y) => {
const result = x + y;
return result;
};如果函数体只有一条语句并且需要返回值，则可以省略花括号和 return 语句：
const sum = (x, y) => x + y;
this 的作用域问题
在传统的函数语法中，this 的值在函数被调用时才确定。this 的值取决于函数被调用时的上下文，即调用该函数的对象。例如：
const person = {
name: 'Alice',
sayName() {
console.log(this.name);
},
};
person.sayName(); // 输出 "Alice"这里的 this 指向 person 对象，因此输出了 person 的名字。如果将 sayName 方法存储到另一个变量中并调用，this 的值将变为全局对象或 undefined：
const say = person.sayName; say(); // TypeError: Cannot read property 'name' of undefined
这是因为 say 方法的调用上下文不是 person 对象，而是全局对象或 undefined。
在箭头函数中，this 的值在函数定义时就确定了，并且取决于箭头函数所在的词法上下文。例如：
const person = {
name: 'Alice',
sayName: () => {
console.log(this.name);
},
};
person.sayName(); // 输出 undefined这里的箭头函数位于全局作用域，因此 this 指向全局对象或 undefined，而非 person 对象。
解决方法
如果在箭头函数中需要引用当前对象，则可以使用 that 或 self 等变量存储当前对象，并在箭头函数中引用该变量。例如：
-- -------------------- ---- -------
----- ------ - -
----- --------
-------- ---------- -
----- ---- - -----
----- ----- - -- -- -
------------------- ----------------
--
--------
--
--
----------------- -- -- ------- -------在这个例子中，使用 that 存储了当前对象，并在箭头函数中引用了该变量，从而避免了 this 的问题。
另一种解决方法是使用 bind 方法将函数绑定到指定的上下文。例如：
const person = {
name: 'Alice',
sayName: () => {
console.log(this.name);
},
};
person.sayName.bind(person)(); // 输出 "Alice"这里使用 bind 方法将箭头函数绑定到 person 对象上，使得箭头函数的 this 指向 person 对象。
需要注意的是，bind 方法返回的是一个新的函数对象，需要调用该函数才能真正起作用。
总结
箭头函数是 ES6 中的一个新增语法，可以使代码更加简洁与优雅。然而，箭头函数也存在一些需要注意的地方，其中之一就是 this 的作用域问题。
在箭头函数中，this 的值在函数定义时就确定了，并且取决于箭头函数所在的词法上下文，而非调用时的上下文。因此，在编写箭头函数时需要注意 this 的问题，并采取适当的解决方法。
在使用箭头函数时，建议遵循以下原则：
- 如果箭头函数内部不需要引用当前对象，则使用箭头函数。
- 如果箭头函数内部需要引用当前对象，则使用函数表达式或函数声明，并使用 that、self 或 bind 等方法解决 this 的问题。
希望本篇文章能够帮助读者更好地理解箭头函数和 this 的作用域问题，并提高代码编写的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64accd1a48841e98948d5512