ES6 中引入了箭头函数，箭头函数是一种更加简洁的函数定义方式，相较于传统函数，其内部的 this 定义方式也有所变化。本文将会详细探讨 ES6 中箭头函数内部的 this 是如何被定义的。
箭头函数的语法
在 ES6 中，使用箭头函数定义函数的语法如下：
() => {
// 函数体
}当函数体只有一行代码时，可以省略花括号，如下：
() => console.log('Hello World!')当箭头函数只有一个参数时，还可以省略参数的小括号，如下：
x => console.log(x)
箭头函数内部的 this
在传统函数中，this 关键字指向的是调用该函数的对象。而箭头函数内部的 this 与传统函数有所不同，其不会被调用的对象所影响，而是指向其定义时所处的上下文环境。
-- -------------------- ---- -------
----- ------ - -
----- --------
------ ---------- -
---------------- -- ---- -- ---------------
-
-
-------------- -- ------ -- ---- -- ------
----- --------- - -- -- -
---------------- -- ---- -- ---------------
-
---------------- ----- ----- -- -- ------ -- ---- -- ----------在上面的代码中，传统函数 sayHi 中的 this 指向的是 person 对象，而箭头函数 arrowFunc 中的 this 则指向其定义时所在的上下文环境，即全局对象 window，没有办法通过 call、apply、bind 等方法来改变其指向。
实际开发中，箭头函数中的 this 经常被用来避免 this 作用域错误。下面是一个使用传统函数和箭头函数实现同样功能的示例：
-- -------------------- ---- -------
-- ------
----- ------ - -
----- --------
-------- ------- ---------- ---------
------ ---------- -
------------------------------------- -
------------------------- ---- -- -- ------------
-- -----
-
-
--------------
-- ------
----- ------ - -
----- --------
-------- ------- ---------- ---------
------ ---------- -
--------------------------- -- -
------------------------- ---- -- -- ------------
--
-
-
--------------在传统函数中，我们需要通过第二个参数将 forEach 中的 this 指向 person 对象。而在箭头函数中，则不需要这么做，因为箭头函数内部的 this 已经指向了 person 对象。
总结
在 ES6 中，箭头函数内部的 this 是由其定义时所处的上下文环境决定的，与传统函数有所不同。箭头函数中的 this 经常被用来避免 this 作用域错误，提高代码的可读性和可维护性。在实际开发中，合理运用箭头函数可以较大程度上提高开发效率。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6464783a968c7c53b05552fd