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

Question

当我使用bind()函数时，我遇到了一种我目前不知道的情况。有人可以给我解释一下为什么这个例子会这样工作吗？显然，传递给绑定(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() 一次。它创建一个绑定(bind)到特定对象的函数。然后 forEach 重复调用该函数。我们可以进一步将其分解为:

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

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