javascript - 从javascript中的对象数组访问绑定(bind)函数

Question

我有一个对象数组，其中包含对我的类函数的引用(由 .bind() 方法绑定(bind))。当我直接访问它们时，比如 array[3].myFunction，一切正常。但是当我尝试访问这些遍历数组的函数时，会出现奇怪的行为。我试过 Array.forEach()、for-in、for-of 和 Array.map() 函数，但结果总是一样的 - 我得到第一个功能四次。我在这里做错了什么？提前致谢。

var Container = function() {
  this.function1 = function() {
    console.log('function 1 invoked');
  };
  this.function2 = function() {
    console.log('function 2 invoked');
  };
  this.function3 = function() {
    console.log('function 3 invoked');
  };
  this.function4 = function() {
    console.log('function 4 invoked');
  };
  
  this.array = [
    { key: '1', myFunction: this.function1.bind(this) },
    { key: '2', myFunction: this.function2.bind(this) },
    { key: '3', myFunction: this.function3.bind(this) },
    { key: '4', myFunction: this.function4.bind(this) },
  ];
};

var container = new Container();

// Just printing the results below
console.log('direct access:');
console.log(container.array[3].myFunction);

console.log('forEach:');
container.array.forEach(el => {
  console.log(el.myFunction);
});

console.log('for in:');
for (let i in container.array) {
  console.log(container.array[i].myFunction);
}

console.log('map:')
container.array.map(el => {
  console.log(el.myFunction);
});

PLNKR:http://plnkr.co/edit/mn8iGh4F3GcJXTNWXMiJ?p=preview

Answer 1

请往下看。一切似乎都正常。

当你执行 console.log(el.myFunction) 时，它实际上会打印 handle 而不是在所有 handle 看起来与 function 相同的地方执行它( ) { [ native 代码] }

当您调用该函数而不是 el.myFunction() 时，您可以看到所有它们都在调用正确的函数并分别打印结果。

您可以在下面检查函数调用。

var Container = function() {
  this.function1 = function() {
    console.log('function 1 invoked');
  };
  this.function2 = function() {
    console.log('function 2 invoked');
  };
  this.function3 = function() {
    console.log('function 3 invoked');
  };
  this.function4 = function() {
    console.log('function 4 invoked');
  };
  
  this.array = [
    { key: '1', myFunction: this.function1.bind(this) },
    { key: '2', myFunction: this.function2.bind(this) },
    { key: '3', myFunction: this.function3.bind(this) },
    { key: '4', myFunction: this.function4.bind(this) },
  ];
};

var container = new Container();

// Just printing the results below
console.log('direct access:');
container.array[3].myFunction();

console.log('forEach:');
container.array.forEach(el => {
  el.myFunction();
});

console.log('for in:');
for (let i in container.array) {
  container.array[i].myFunction();
}

console.log('map:')
container.array.map(el => {
  el.myFunction();
});