全球开发者为 ES11 踩坑记录：Arrow function 在 Class 中依旧报错？
ES11 的发布受到了开发者的热烈欢迎，但是随之而来的错误也引起了一些关注。其中一个最常见的问题是使用箭头函数时在 Class 中依旧出现了错误。本文将详细介绍这个问题，以及如何修复这个问题。
问题描述
在 ES11 的早期版本中，箭头函数在 Class 中使用时可能会出现以下错误信息：
Uncaught TypeError: 失败，因为去下文的层级未绑定该函数
这个错误信息是比较晦涩的，尤其是对于新手来说。简单来说，在 Class 中使用箭头函数时，箭头函数内部的 this 指向的是这个 Class 的外部作用域，而不是这个 Class 的实例。
例如，看下面的代码：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
------- - -- -- -
-----------------------
--
-
----- ------ - --- --------------
-----------------看起来这段代码是无误的，因为 sayName它使用了箭头函数，所以它内部的 this 指向了 Person 对象。然而，如果将 sayName 作为另一个对象的方法调用，你会发现有问题：
const anotherObject = {
name: 'Jerry'
};
anotherObject.sayName = person.sayName;
anotherObject.sayName();这时候你会得到以下错误信息：
Uncaught TypeError: Cannot read property 'name' of undefined
这是因为在这个 person.sayName 方法中的 this 指向的是 Person 的实例，而不是 anotherObject 对象。
解决方案
为了解决这个问题，你需要将箭头函数改为普通函数，并在 constructor 中使用 bind 方法将 this 绑定到正确的实例上。例如：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
------------ - ------------------------
-
--------- -
-----------------------
-
-现在， this 会指向正确的实例，并且你可以将 sayName 方法绑定到 anotherObject 对象上了：
anotherObject.sayName = person.sayName.bind(person); anotherObject.sayName(); // 输出 'Tom'
总结
为了解决箭头函数在 Class 中的使用问题，你需要将它们转换为普通函数，并使用 bind 方法将其绑定到正确的实例上。这个过程可能会让代码很冗长，但这是一种可行的解决方法。当然，最好的解决方案还是尽量避免在 Class 中使用箭头函数。如果你确实需要使用它们，确保你理解它们的工作原理，并且小心谨慎地使用它们。
示例代码：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
------------ - ------------------------
-
--------- -
-----------------------
-
-
----- ------ - --- --------------
-----------------
----- ------------- - -
----- -------
--
--------------------- - ----------------------------
------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64bf7fdb9e06631ab9bee58f