详解 ES6 foreach 的坑，“this” 绑定会出现问题-JavaScript中文网-JavaScript教程资源分享门户

详解 ES6 foreach 的坑，“this” 绑定会出现问题

ES6的forEach方法在进行循环迭代时，存在着一些坑，特别是“this”绑定的问题会导致程序出错，这也是开发者在使用ES6的forEach方法时经常会遇到的问题。

ES6的forEach方法提供了一个便捷的方法进行迭代，而不必使用常规的for循环语句。例如，在数组中使用forEach方法进行迭代，可以非常方便地遍历出数组中的每一项。

let arr = [1, 2, 3, 4];

arr.forEach((item) => {
  console.log(item);
});

// output: 1 2 3 4

我们可以看到，通过ES6的forEach方法，我们可以循环遍历数组中的每一个元素，而无需使用传统的for循环语句。但是，当我们使用this访问对象时，就会遇到一些问题。

在使用ES6 forEach方法进行迭代时，this绑定会出现问题，比如在下面的代码中：

let obj = {
  val: 1,
  printVal: function() {
    console.log(this.val);
  }
};

[1, 2, 3, 4].forEach(obj.printVal);

我们期望的是输出1、2、3、4，但事实上输出的是undefined，undefined，undefined，undefined。为什么？

在ES6的forEach迭代方法的原理中，每个迭代都会提供一个当前项的引用，该引用本质上是变量this的一个匿名值。然而，这样的引用通常会导致代码不能正常工作。

因此，解决此问题的一个常见的方法是使用bind()方法将正确的上下文绑定到当前迭代的函数实例中。例如：

let obj = {
  val: 1,
  printVal: function() {
    console.log(this.val);
  }
};

[1, 2, 3, 4].forEach(obj.printVal.bind(obj));

我们期望的输出是得到1、2、3、4。通过使用bind()方法，我们成功地将正确的上下文绑定到了当前的forEach迭代中。

虽然ES6的forEach方法具有很多优点，但它也存在一些细节，容易被开发者忽略。其中“this”的绑定问题是一个常见的问题，需要特别关注。

在使用ES6的forEach方法时，如何正确处理this绑定问题，可以避免错误，提高代码的正确性。

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