在 ES6/ES7 中，箭头函数是一种新的函数定义语法，它可以让我们更加简洁地定义函数。但是，箭头函数的作用域规则与普通函数有所不同，可能会导致一些意想不到的错误。在本文中，我们将深入探讨箭头函数的作用域问题，并提供解决方案。
箭头函数的作用域规则
箭头函数的作用域与普通函数不同，它没有自己的 this、arguments 和 super，它们都继承自父作用域。例如：
-- -------------------- ---- -------
----- --- - -
----- --------
--------- -
----- -- - -- -- -
-----------------------
--
-----
-
--
-------------- -- -- -------在上面的例子中，箭头函数 fn 继承了 sayName 的 this，所以它可以访问到 obj 的 name 属性。
另外，箭头函数的 arguments 对象和 super 关键字也继承自父作用域。例如：
function fn() {
const foo = () => {
console.log(arguments[0]);
console.log(super.toString());
};
foo();
}
fn(42); // 输出 42 和 "function fn() { ... }"在上面的例子中，箭头函数 foo 继承了 fn 的 arguments 和 super，所以它可以访问到 fn 的参数和定义。
箭头函数作用域错误的问题
由于箭头函数继承了父作用域的 this，有时候会导致一些意想不到的错误。例如：
-- -------------------- ---- -------
----- --- - -
----- --------
--------- -
------------- -- -
-----------------------
-- ------
-
--
-------------- -- -- ---------在上面的例子中，箭头函数继承了 sayName 的 this，但是它被传递给了 setTimeout，导致 this 指向了全局对象。因此，输出 undefined。
另外一个例子是：
-- -------------------- ---- -------
----- --- - -
----- --------
--------- -
----- -- - -- -- -
-----------------------
--
--------- ----- ----- ---
-
--
-------------- -- -- -------在上面的例子中，虽然我们使用了 call 方法改变了 fn 的 this，但是箭头函数依然继承了 sayName 的 this，所以输出的是 "Alice"。
解决箭头函数作用域错误的问题
为了解决箭头函数作用域错误的问题，我们可以使用一些技巧。例如，使用 bind 方法：
-- -------------------- ---- -------
----- --- - -
----- --------
--------- -
--------------------- -
-----------------------
------------- ------
-
--
-------------- -- -- -------在上面的例子中，我们使用了 bind 方法将函数的 this 绑定到 obj 上，这样箭头函数就可以正确地访问到 name 属性了。
另外一个技巧是使用变量来保存 this：
-- -------------------- ---- -------
----- --- - -
----- --------
--------- -
----- ---- - -----
------------- -- -
-----------------------
-- ------
-
--
-------------- -- -- -------在上面的例子中，我们使用了一个名为 self 的变量来保存 this，然后在箭头函数中使用 self 来访问 name 属性。
总结
在本文中，我们深入探讨了箭头函数的作用域问题，并提供了解决方案。我们发现，由于箭头函数继承了父作用域的 this，有时候会导致一些意想不到的错误。为了解决这个问题，我们可以使用 bind 方法或者变量来保存 this。希望本文对你有所帮助，谢谢阅读！
示例代码
-- -------------------- ---- -------
----- --- - -
----- --------
--------- -
----- -- - -- -- -
-----------------------
--
--------- ----- ----- ---
-
--
-------------- -- -- -------
----- --- - -
----- --------
--------- -
------------- -- -
-----------------------
-- ------
-
--
-------------- -- -- ---------
----- --- - -
----- --------
--------- -
--------------------- -
-----------------------
------------- ------
-
--
-------------- -- -- -------
----- --- - -
----- --------
--------- -
----- ---- - -----
------------- -- -
-----------------------
-- ------
-
--
-------------- -- -- -------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66251166f76562e4b38e1cf9