解决使用 ECMAScript 2015 箭头函数的 this 指向问题-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2015 中，推出了箭头函数，这是一种新的函数定义方式，它弥补了传统函数的一些缺陷，例如：不需要使用 function 关键字，不需要写大括号，不需要使用 return 关键字等等。但是，箭头函数也存在一个严重的问题，那就是它的 this 指向。

传统函数的 this 指向问题

在传统函数中，this 是非常重要的一个概念，它指向的是当前函数调用的上下文对象。例如：

var person = {
  name: '张三',
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};
person.sayHello(); // 输出：Hello, my name is 张三

在上面的代码中，this 指向的是 person 对象，因此调用该方法时，可以正确输出张三的名字。

但是，this 指向往往会引发一些难以理解的问题。例如：

var button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // 输出：<button>Click me!</button>
});

在上面的代码中，this 指向的是触发事件的元素，也就是 button 按钮。这样的结果可能并不是我们所期望的，因为我们往往希望 this 指向的是当前对象，而不是触发事件的元素。

箭头函数的 this 指向问题

在箭头函数中，this 的指向与传统函数有所不同。例如：

var person = {
  name: '张三',
  sayHello: () => {
    console.log('Hello, my name is ' + this.name);
  }
};
person.sayHello(); // 输出：Hello, my name is undefined

在上面的代码中，箭头函数中的 this 指向的是父级作用域中的 this 对象，也就是全局作用域中的 this，因此输出的结果是 undefined。

这是因为箭头函数没有自己的 this，而是继承了父级作用域中的 this。这无疑给开发带来了一些麻烦，但是也可以通过一些技巧来解决这个问题。

解决箭头函数的 this 指向问题

解决箭头函数的 this 指向问题，有几种常见的方法，包括使用 ES6 的新语法、使用 bind 方法、使用上下文对象等。

使用 ES6 的新语法

在 ES6 中，可以使用 let 和 const 关键字来声明变量，这样就可以避免使用传统的 var 关键字，从而避免 this 指向的问题。例如：

var person = {
  name: '张三',
  sayHello() {
    console.log('Hello, my name is ' + this.name);
  }
};
person.sayHello(); // 输出：Hello, my name is 张三

在上面的代码中，使用了 let 和 const 关键字来声明变量，这样就可以正确地使用 this 指向 person 对象。

使用 bind 方法

使用 bind 方法可以将函数绑定到指定的 this 上下文中。例如：

var person = {
  name: '张三',
  sayHello() {
    console.log('Hello, my name is ' + this.name);
  }
};
var sayHello = person.sayHello.bind(person);
sayHello(); // 输出：Hello, my name is 张三

在上面的代码中，使用了 bind 方法将 sayHello 函数绑定到 person 对象上下文中，从而可以正确地使用 this 指向 person 对象。

使用上下文对象

使用上下文对象也可以解决箭头函数的 this 指向问题。例如：

-- -------------------- ---- -------
--- ------ - -
  ----- -----
  --------- ---------- -
    --- ---- - -----
    --- ----- - ---------- -
      ------------------- -- ---- -- - - -----------
    --
    --------
  -
--
------------------ -- --------- -- ---- -- --

在上面的代码中，使用了一个变量 self 来存储 this 对象，然后在内部函数中使用 self 来指向 person 对象。

总结

以上我们介绍了如何解决使用 ECMAScript 2015 箭头函数的 this 指向问题。通过学习这些方法，我们可以更好地使用箭头函数，从而提高代码的可读性和可维护性。

示例代码如下：

-- -------------------- ---- -------
--- ------ - -
  ----- -----
  ---------- -
    ------------------- -- ---- -- - - ----------- -- -------------
  -
--
------------------ -- --------- -- ---- -- --

--- ------ - -
  ----- -----
  --------- ---------- -
    ------------------- -- ---- -- - - ----------- -- ------------
  -
--
--- -------- - -----------------------------
----------- -- --------- -- ---- -- --

--- ------ - -
  ----- -----
  --------- ---------- -
    --- ---- - -----
    --- ----- - ---------- -
      ------------------- -- ---- -- - - ----------- -- -----------
    --
    --------
  -
--
------------------ -- --------- -- ---- -- --

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f13ab7f6b2d6eab3b0f88e