ES6 中的箭头函数指针 this 的详解
在 JavaScript 中，函数是对象，因此函数也有指针 this。在传统的函数中，this 指向的是函数被调用的对象。但是，在 ES6 中出现了一种新类型的函数——箭头函数，它的 this 比较特殊。在本文中，我们将对 ES6 中的箭头函数指针 this 进行详细的解释和探讨。
箭头函数简介
箭头函数（Arrow Function）是 ES6 中最简洁的一种函数表达式。使用箭头函数可以优雅地编写代码，并且减少了许多不必要的代码。箭头函数与传统的函数表达式有许多相似之处，但是它的语法更加简洁明了。
箭头函数的语法如下：
(param1, param2, ..., paramN) => { statements }
(param1, param2, ..., paramN) => expression
// 等价于: (param1, param2, ..., paramN) => { return expression; }其中第一种语法形式中，箭头函数使用了一对大括号（{}）包裹函数体，这表示函数需要执行多个语句。第二种语法形式则表示函数只需要执行一个表达式，不需要写 return 语句。
箭头函数中 this 的指向
箭头函数的 this 指向与传统函数不同。在箭头函数中，this 指向的是创建时所在的作用域下的 this，而不是执行时的 this。
我们可以通过以下示例代码来了解箭头函数中 this 的指向。
-- -------------------- ---- -------
--- ---- - ---------
-------- -------- -
--------- - --------
------------ - ---------- -
-----------------------
--
----------------- - -- -- -----------------------
-
--- ------ - --- ---------
--- ------- - ---------------
--- ------------ - --------------------
---------- -- -- ------
--------------- -- -- -----我们可以看到，当调用 sayName 方法时，this 指向的是全局对象，因为这个方法被赋值给了一个全局变量。但是，当调用 sayNameArrow 方法时，this 指向的是创建时所在的作用域下的 this，也就是 Person 对象，因为箭头函数创建时所在的作用域是 Person 对象。
实际应用场景
在实际的开发中，我们经常会遇到 this 指向不明确的情况。如果使用传统的函数表达式可能会遇到一些麻烦，我们可以使用箭头函数来避免这些问题。
以下是一个使用箭头函数解决 this 指向问题的示例代码：
var button = document.querySelector('button');
button.addEventListener('click', () => {
console.log(this); // 输出 button 元素
});在这个代码中，我们使用箭头函数来解决 this 指向问题，让代码看起来更加简洁明了。
总结
在本文中，我们对 ES6 中的箭头函数指针 this 进行了详细的探讨。我们了解了箭头函数的语法形式以及它的 this 指向，同时也介绍了一些实际应用场景。掌握了这些知识，我们可以更加优雅地编写 JavaScript 代码，并避免一些不必要的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653518dc7d4982a6ebb16df2