解决 JavaScript 中 forEach 中 this 指向问题-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，forEach 是一个常用的数组迭代方法。但是在使用 forEach 的时候，经常会遇到 this 指向问题。由于 forEach 函数中的回调函数会创建自己的执行环境，因此 this 指向会发生变化，导致我们无法正确地引用到需要的对象。

为了解决这个问题，我们需要了解一些 JavaScript 中 this 指向的知识点。

this 指向的基本概念

在 JavaScript 中，this 指向是非常重要的概念。它通常指向当前执行上下文中的对象。如果函数被调用时，没有明确指定 this 指向的话，this 指向会根据以下规则进行推断：

而在 forEach 中，this 指向是被明确指定的。它通常指向当前迭代的数组元素。

为了解决 forEach 中的 this 指向问题，我们可以使用箭头函数或者将 this 用一个变量缓存下来的方法。

箭头函数是 ECMAScript 6 中引入的一种新的函数类型。它的特点是可以绑定当前词法作用域中的 this 值，使得在函数体内部 this 不会改变。

在 forEach 中使用箭头函数可以解决 this 指向的问题。示例如下：

const fruits = ['apple', 'banana', 'orange'];

fruits.forEach(fruit => {
  console.log(fruit);
});

这里使用箭头函数作为 forEach 的回调函数，this 指向被自动绑定到了外层的执行环境，即全局环境。因此，在函数体中可以正确地访问外部变量。

除了使用箭头函数，我们还可以使用缓存 this 的方法来解决 this 指向问题。具体实现方式如下：

const fruits = ['apple', 'banana', 'orange'];
const that = this;

fruits.forEach(function (fruit) {
  console.log(that, fruit);
});

这里使用变量 that 来缓存 this，然后在回调函数中访问 that 就可以正确地获取到原来的 this 指向了。

本文介绍了 JavaScript 中 forEach 中的 this 指向问题，并提供了两种解决方法，即箭头函数和缓存 this。使用这两种方法，我们可以更好地避免 forEach 中的 this 指向问题，并正确地引用到需要的对象。

当然，本文只是一个入门级别的介绍。在实际开发中，还有很多需要我们继续深入了解和学习的内容。希望本文能够引起大家的思考，帮助大家更好地理解和使用 forEach 函数。

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