ES6 中 function 和箭头函数的 this 指向区别及其解决方法

在 JavaScript 中，this 是一个非常重要的概念，它指向当前函数的执行上下文。在 ES6 中，新增加了箭头函数，它和普通的 function 有着很大的区别，尤其是在 this 的指向上。本文将详细介绍 ES6 中 function 和箭头函数的 this 指向区别及其解决方法。

function 中的 this 指向

在 function 中，this 的指向是在运行时决定的，它依赖于函数的调用方式。如果函数是以对象的方法的形式调用的，那么 this 就指向调用该方法的对象。如果函数是以普通函数的形式调用的，那么 this 就指向全局对象。

const obj = {
  name: 'Jack',
  sayName() {
    console.log(this.name);
  }
};

obj.sayName(); // 输出 'Jack'

const sayName = obj.sayName;
sayName(); // 输出 undefined，因为此时的 this 指向全局对象

箭头函数中的 this 指向

在箭头函数中，this 的指向是在定义时决定的，它指向箭头函数所在的上下文。箭头函数中的 this 指向不会被函数的调用方式所改变。

const obj = {
  name: 'Jack',
  sayName: () => {
    console.log(this.name);
  }
};

obj.sayName(); // 输出 undefined，因为箭头函数中的 this 指向不会被函数的调用方式所改变

const sayName = obj.sayName;
sayName(); // 输出 undefined，因为箭头函数中的 this 指向不会被函数的调用方式所改变

解决方法

在实际开发中，我们经常会遇到需要访问对象上下文的情况。如果我们使用箭头函数，就无法访问到对象上下文，这时我们可以使用 bind、call、apply 等方法来改变函数中 this 的指向。

const obj = {
  name: 'Jack',
  sayName() {
    console.log(this.name);
  }
};

const sayName = obj.sayName.bind(obj);
sayName(); // 输出 'Jack'

另外，如果我们需要在箭头函数中访问到对象上下文，可以将该上下文存储在变量中，然后在箭头函数中使用该变量。

const obj = {
  name: 'Jack',
  sayName: () => {
    const self = obj;
    console.log(self.name);
  }
};

obj.sayName(); // 输出 'Jack'

总结

ES6 中 function 和箭头函数的 this 指向有着很大的区别。在 function 中，this 的指向是在运行时决定的；在箭头函数中，this 的指向是在定义时决定的。如果我们需要访问对象上下文，可以使用 bind、call、apply 等方法来改变函数中 this 的指向，或者将该上下文存储在变量中，然后在箭头函数中使用该变量。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c06ab0add4f0e0ffa4af5d