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

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

{
    str: ''
}

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

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

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

声明

this.str += element + ',';

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

因此，您会看到您看到的结果。如果这澄清了你的问题，请告诉我。

Answer 2

更容易看出你是否将参数与函数调用分开。一个函数调用如：

someFunc(<expression>);

相当于：

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

所以在你的情况下，就像这样：

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

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

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

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

具有内联对象定义的{Javascript Function.prototype.bind（）

2 个答案: