在 JavaScript 中，this 关键字经常被用来访问当前上下文对象。然而，this 经常让开发者感到困惑，因为它的指向有时候不是我们所期望的。ES6 中的箭头函数提供了一种新的方式来解决这个问题。
什么是箭头函数
箭头函数是 ES6 中的一个新特性，它提供了一种更简洁的方式来定义函数。箭头函数使用箭头符号（=>）来定义，可以同时省略花括号和 return 关键字。
下面是一个简单的箭头函数示例：
const sum = (a, b) => a + b; console.log(sum(1, 2)); // 3
上面的代码中，箭头函数 sum 接收两个参数 a 和 b，然后将它们相加并返回结果。
this 的问题
在 JavaScript 中，this 关键字通常用于访问当前上下文对象。然而，this 的指向往往是令人困惑的。下面是一个简单的示例：
const person = {
name: 'Alice',
sayHi: function() {
console.log(`Hi, my name is ${this.name}.`);
}
};
person.sayHi(); // Hi, my name is Alice.在上面的代码中，person 对象有一个 sayHi 方法，该方法会打印出一个问候语，其中包含当前对象的名称。当我们调用 person.sayHi() 方法时，输出的结果是 Hi, my name is Alice.，这是我们所期望的。
然而，如果我们将 sayHi 方法分离出来并作为一个独立的函数，则会出现问题：
-- -------------------- ---- -------
----- ------ - -
----- --------
------ ---------- -
--------------------- -
---------------- -- ---- -- ----------------
-- ------
-
--
--------------- -- --- -- ---- -- ----------在上面的代码中，我们将 sayHi 方法中的 setTimeout 函数提取出来作为一个独立的函数。当我们再次调用 person.sayHi() 方法时，输出的结果是 Hi, my name is undefined.，这跟我们的期望不符。
这是因为在 setTimeout 函数中，this 指向的是全局对象，而不是 person 对象。因此，我们无法访问 person 对象中的 name 属性。
使用箭头函数解决 this 指向问题
ES6 中的箭头函数提供了一种非常便利的方式来解决 this 指向问题。
在箭头函数中，this 关键字指向的是它所在的父作用域的 this 关键字。这意味着我们可以在箭头函数内部访问到 this 所指向的对象。
下面是一个使用箭头函数的示例：
-- -------------------- ---- -------
----- ------ - -
----- --------
------ ---------- -
------------- -- -
---------------- -- ---- -- ----------------
-- ------
-
--
--------------- -- --- -- ---- -- ------在上面的代码中，我们使用箭头函数来替代原来的回调函数。由于箭头函数的 this 关键字指向的是它所在的父作用域的 this 关键字，因此我们可以在箭头函数内部访问到 person 对象中的 name 属性。
总结
ES6 中的箭头函数提供了一个非常方便的方式来解决 JavaScript 中 this 指向的问题。在箭头函数中，this 关键字指向的是它所在的父作用域的 this 关键字，这让我们可以更加方便地访问上下文对象。
在实际开发中，我们可以使用箭头函数来避免 this 指向错误的问题，并使我们的代码更加易读和易于维护。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
----- ------ - -
----- --------
------ ---------- -
------------- -- -
---------------- -- ---- -- ----------------
-- ------
-
--
--------------- -- --- -- ---- -- ------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e408daf6b2d6eab3f63486