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