带有内联对象定义的 Javascript Function.prototype.bind()

Question

在使用 bind() 函数时，我遇到了一种我目前不知道的情况。 有人可以给我解释一下为什么这个例子是这样工作的吗？ 显然，传递给绑定函数的内联对象仅在第一次迭代中初始化，然后保留引用。 我找不到有关此的任何文档，如果您能指出正确的方向，我将不胜感激:-)

class test {

 addLetter(element) {
  console.log('addLetter', this.str);
  this.str += element + ',';
 }

 foo() {
  let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

  arr.forEach(this.addLetter.bind({
   str: ''
  }));
 }
}

let a = new test();
a.foo();

OUTPUT:
addLetter 
addLetter a,
addLetter a,b,
addLetter a,b,c,
addLetter a,b,c,d,
addLetter a,b,c,d,e,
addLetter a,b,c,d,e,f,

Answer 1

如果您将参数与函数调用分开，则更容易查看。像这样的函数调用：

someFunc(<expression>);

相当于：

var tempVar = <expression>;
someFunc(tempVar);

所以在你的情况下，它是这样的：

var tempVar = this.addLetter.bind({
   str: ''
});
arr.forEach(tempVar);

这清楚地表明，当我们设置tempVar 时，我们只调用了一次bind()。它创建一个绑定到特定对象的函数。然后forEach 重复调用该函数。我们可以进一步分解为：

var tempObj = { str: '' };
var tempFun = this.addLetter.bind(tempObj);
arr.forEach(tempFun);

现在应该很清楚为什么每次调用函数时只有一个对象会被重用。

Answer 2

.bind() 的第一个参数是上下文。在这种情况下，它是

{
    str: ''
}

现在，您正在引用它并在其中使用其str 属性。现在，我们知道.bind() 返回一个函数。该函数恰好在.forEach() 中调用。

这个bind generated function 接收一个元素作为它的第一个参数（取决于迭代）。

第一次迭代索引为零，bind generated function 函数接收 'a' 作为其参数。

声明

this.str += element + ',';

将 str 增强为'' + 'a'。在第二次迭代中，参数是 'b' 并附加到 'a,' + 'b' 等等。

因此您会看到您看到的结果。让我知道这是否可以澄清您的问题。