再次被javascript混淆了

Question

一些更新： 感谢大家的帮助。我想这可能是关键的混淆点：参数区域中的“this”不被视为函数“内部”，因此不会遵循 mdn 指定的规则（this 指向调用该方法的 obj）。下面的例子：

someObj {
    someF(//but if "this" shows up here, it doesn't point to someObj) {
        //when called, "this" here will point to someObj
    }
}

原始问题：

看了很多文档后，我以为我对此有很好的理解，但我错了。

下面的例子来自MDN：

function Counter() {
  this.sum = 0;
  this.count = 0;
}
Counter.prototype.add = function(array) {
// Here "this" points to obj
  array.forEach(function(entry) {
    this.sum += entry;
    ++this.count;
  }, this);
  // ^---- Note, why it points to obj, not array [2,5,9]???

// Here "this" points to obj
};

const obj = new Counter();
obj.add([2, 5, 9]);
obj.count;
// 3 
obj.sum;
// 16

我明白了：

• 需要将this传递给forEach，否则在回调函数中，this会指向全局/窗口（非严格模式）。
• 在function(array) 的大部分区域内，this 指向 obj（从新的Counter() 创建），如 cmets 所示。
• 回调函数如何使用从 forEach 传递的“this”作为第二个参数。我对此没有任何疑问

但基于此article on MDN 具体来说：

"作为对象方法，当函数作为对象的方法被调用时 对象，它的 this 设置为调用该方法的对象。”

不应该将this（由 ^---Note 突出显示）传递到指向数组对象的回调点中，即在这种情况下为 [2,5,9]。为什么会指向 obj 而不是数组？

非常感谢您的帮助，这太令人困惑了。

Answer 1

需要在forEach中传入“this”，否则内部函数中的“this”会指向全局/窗口（非严格模式）。

this 的值取决于函数的调用方式。您看不到调用您传递给forEach 的回调函数的代码（它在浏览器内部）。碰巧，它确实是这样调用的，所以它是window（如果你没有将第二个参数传递给forEach）。

作为对象方法，当函数作为对象的方法被调用时，它的this被设置为调用该方法的对象

这无关紧要。您没有将回调函数作为对象的方法调用。您将其传递给 forEach ... 然后 forEach 正在调用它。

你正在调用forEach作为数组的一个方法，所以在forEach函数内——你看不到，因为它在内部browser — this 将是数组。

为什么它会指向 obj 而不是数组？

因为forEach 被明确设计为以这样一种方式调用回调函数，即forEach 的第二个参数是回调函数内的this 值。

你引用了这样说的文档。

Answer 2

您可能会在以下将对象的this 的引用作为forEach() 的thisArg 传递时看到它更容易

Counter.prototype.add = function(array) {
  //here "this" points to obj
  const _self = this

  array.forEach(function(entry) {
    // _self passed in as second argument is now `this`
    console.log(this === _self) // true

    this.sum += entry;
    ++this.count;
  }, _self);
  // ^---- passing in reference to the `add` object instance `this`


};

Answer 3

我认为您的困惑源于 MDN 引用中的“调用”一词，我不会说这是您的错。在obj.add([2, 5, 9]) 的情况下，obj.add 正在被“调用”[2, 5, 9]，这听起来并没有错。然而，他们想说的是add 方法正在被“调用”obj。

不管你想怎么表达它，它的工作方式（通常）是如果你从一个对象的属性调用一个函数，那个对象就是 this 将指向该函数内部的东西。对于obj.add([2, 5, 9])，add 函数是通过对象obj 访问的，因此在add 的调用中将obj 设置为this。

Answer 4

这个问题正是引入arrow functions 的原因。它们更紧密地绑定到您的封闭闭包。

function Counter() {
  this.sum = 0;
  this.count = 0;
}
Counter.prototype.add = function(array) {
  array.forEach(entry => {
    /* 
      Because we are using an arrow function here, it is using the 
      enclosing closure (which originates from `obj`).
    */
    this.sum += entry;
    ++this.count;
  });

};

const obj = new Counter();
obj.add([2, 5, 9]);
console.log(obj.sum);
console.log(obj.count);

来自链接的文档：

箭头函数没有自己的 this。使用封闭词法范围的 this 值；箭头函数遵循正常的变量查找规则。因此，在搜索当前作用域中不存在的 this 时，箭头函数最终会从其封闭作用域中找到 this。