ES6 中的函数 this 指向问题解决

在 JavaScript 中，this 关键字经常被用来指向当前对象。但是在 ES6 中，由于箭头函数的出现，函数的 this 指向问题变得更加复杂。本文将详细介绍 ES6 中函数 this 指向问题的解决方法，帮助前端开发者深入理解并掌握这个重要的概念。

传统函数中的 this

在传统函数中，this 的值是在函数被调用时确定的。如果函数是作为对象的方法调用的，this 就指向该对象。例如：

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

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

如果函数不是作为对象的方法调用的，this 就指向全局对象（在浏览器中为 window，在 Node.js 中为 global）。例如：

function sayName() {
  console.log(this.name);
}

const name = 'Alice';
sayName(); // 输出 'Alice'

在严格模式下，如果函数不是作为对象的方法调用的，this 就会是 undefined。

箭头函数中的 this

在箭头函数中，this 的值是在函数定义时确定的，而不是在函数被调用时。箭头函数的 this 始终指向定义它时所在的作用域中的 this。例如：

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

obj.sayName(); // 输出 undefined

在这个例子中，箭头函数的 this 指向全局对象，因为它是在全局作用域中定义的，而不是在 obj 对象的作用域中定义的。

解决方法

为了解决函数 this 指向的问题，我们可以使用 call、apply 或 bind 方法来显式地指定 this 的值。例如：

// javascriptcn.com 代码示例
const obj = {
  name: 'Alice',
  sayName() {
    console.log(this.name);
  }
};

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

在这个例子中，使用 bind 方法将 obj 对象绑定到 sayName 函数中，使得函数调用时 this 指向 obj 对象。

另外，我们也可以使用箭头函数来避免 this 指向的问题。由于箭头函数的 this 始终指向定义它时所在的作用域中的 this，因此它可以避免 this 指向不明的问题。例如：

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

obj.sayName(); // 输出 undefined

在这个例子中，箭头函数的 this 指向 obj 对象，因为它是在 obj 对象的作用域中定义的。

总结

函数 this 指向问题是 JavaScript 中一个重要且常见的问题。在 ES6 中，由于箭头函数的出现，函数的 this 指向问题变得更加复杂。为了解决这个问题，我们可以使用 call、apply 或 bind 方法来显式地指定 this 的值，或者使用箭头函数来避免 this 指向不明的问题。掌握这些方法可以帮助前端开发者更加深入地理解 JavaScript 中的函数 this 指向问题，提高代码的可维护性和可读性。

示例代码

// javascriptcn.com 代码示例
const obj = {
  name: 'Alice',
  sayName() {
    console.log(this.name);
  }
};

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

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

obj2.sayName(); // 输出 undefined

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