在 Javascript 中，this 指的是当前执行上下文的对象。this 的值可以根据函数调用的方式和位置来变化。但是在 ES6 中，引入了箭头函数，箭头函数不同于普通函数，它的 this 是词法作用域，也就是说箭头函数里的 this 是嵌套它上层作用域的 this，而不是箭头函数自身的 this。
示例代码
-- -------------------- ---- ------- -- ---- ----- ----- - -------- -- - ----------------------- - ----- ---- - - ----- ------- --- ----- ----- - ------------ -- -- ------ - -- ---- ----- ----- - -- -- - ----------------------- - ----- ---- - - ----- ------- --- ----- ----- - ------------ -- -- ---------
在上面的代码示例中，函数 func1 是一个普通函数，它的 this 指向的是调用这个函数的对象 obj1。而箭头函数 func2 中的 this 指向的却是全局对象 window，所以它的输出结果是 undefined。
箭头函数的使用场景
箭头函数的使用场景和普通函数有所不同。在某些情况下，使用箭头函数可以更加简洁明了。
1. 简化回调函数
// 使用普通函数
[1, 2, 3].map(function (x) {
return x * x;
});
// 使用箭头函数
[1, 2, 3].map(x => x * x);在使用回调函数的时候，箭头函数可以更加简洁，减少冗余。
2. 简化嵌套函数
-- -------------------- ---- -------
-- ------
-------- ------- -
------ -------- -- -
------------------
-
-
--- --- - --------
------ -- ------ ------
-- ------
-------- ------- -
------ -- -- -
------------------
-
-
--- --- - --------
------ -- ------- -------------- ----在使用嵌套函数的时候，箭头函数可以减少因嵌套导致的 this 指向问题。
总结
ES6 箭头函数与普通函数的差别在于箭头函数没有自己的 this，它继承了上层作用域的 this。因此在使用箭头函数的时候要注意上层作用域的 this 指向，避免产生错误。同时，在某些情况下，使用箭头函数可以简化代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a63c9848841e98942d6396