在 ES6 中，箭头函数是一个非常实用的特性，它可以让我们更加简洁地编写代码。不过，箭头函数和普通函数在 this 的指向上有所不同，这往往会导致一些问题。本文将会介绍 ES6 中箭头函数的 this 指向问题，并提供一些实践总结和指导意义。
箭头函数的 this 指向问题
在普通函数中，this 的指向是动态的，它取决于函数的调用方式。比如：
----- --- - -
----- -------
--------- -
-----------------------
-
--
-------------- -- -- ------
----- ------- - ------------
---------- -- -- ---------在第一个例子中，sayName 函数是作为 obj 的方法来调用的，因此 this 指向 obj 对象，输出了 'John'。而在第二个例子中，sayName 函数是直接被调用的，此时 this 指向全局对象 window，因此输出了 undefined。
而在箭头函数中，this 的指向是静态的，它取决于函数的定义方式。比如：
----- --- - -
----- -------
-------- -- -- -
-----------------------
-
--
-------------- -- -- ---------
----- ------- - ------------
---------- -- -- ---------在箭头函数中，this 指向的是父级作用域的 this，也就是说它是在定义时确定的，而不是在调用时确定的。因此，在上面的例子中，箭头函数的 this 指向全局对象 window，输出了 undefined。
实践总结
在实际开发中，我们经常会遇到箭头函数的 this 指向问题。为了避免出现问题，我们可以采用以下几个实践总结：
1. 不要在箭头函数中使用 this
由于箭头函数的 this 指向是静态的，所以我们在箭头函数中使用 this 很容易出现问题。因此，我们可以尽量避免在箭头函数中使用 this，如果必须要使用，可以使用普通函数来替代。
2. 使用 bind() 方法来改变 this 指向
如果我们需要在箭头函数中使用 this，并且希望它指向某个特定的对象，可以使用 bind() 方法来改变 this 指向。比如：
----- --- - -
----- -------
--------- -
----- -- - -- -- -
-----------------------
--
---------------
-
--
-------------- -- -- ------在上面的例子中，我们使用 bind() 方法将箭头函数的 this 指向 obj 对象，这样就可以输出 'John' 了。
3. 使用 ES6 中的解构赋值来避免 this 指向问题
ES6 中的解构赋值可以让我们更加方便地获取对象中的属性，同时也可以避免 this 指向问题。比如：
----- --- - -
----- -------
--------- -
----- - ---- - - -----
----- -- - -- -- -
------------------
--
-----
-
--
-------------- -- -- ------在上面的例子中，我们使用解构赋值来获取 obj 对象中的 name 属性，并将它赋值给一个常量。这样我们就可以在箭头函数中使用常量来代替 this，避免了 this 指向问题。
指导意义
在实际开发中，我们需要时刻注意箭头函数的 this 指向问题，避免出现代码错误。如果必须要在箭头函数中使用 this，可以使用 bind() 方法或者解构赋值来改变 this 指向，同时也要注意代码的可读性和维护性。
总之，ES6 中箭头函数的 this 指向问题是一个比较重要的知识点，我们需要认真学习和掌握。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6509eff395b1f8cacd46ec51