从javascript中的对象数组访问绑定函数

我有一个包含对我的类函数引用（由.bind()方法限制）的对象数组。当我直接访问他们，如array[3].myFunction，一切工作正常。但是当我尝试访问遍历数组的这些函数时会出现奇怪的行为。我已经尝试了Array.forEach()，for-in，for和和Array.map()函数，但结果总是相同的 - 我得到了第一个函数四次。我在这里做错了什么？提前致谢。从javascript中的对象数组访问绑定函数

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

来源

2016-11-22 Daniel Kucal

既然你没有实际调用这些函数，我得到的是'函数（）{[本地代码]}'（绑定函数对象）每次。无法与其他人区分。 – Bergi

如果你真的在这些循环中调用函数，不仅仅是记录函数本身，还会发生预期的输出。我的猜测是'toString（）'中的一个错误，至少在我的Chrome版本中。您可能想指出，至少在Chrome中，它每次都会显示'function1'的函数体。 – Jacob

@Bergi在Chrome控制台中查看结果 –

看看下面。所有似乎都在工作。

当你做console.log(el.myFunction)，它实际上将打印handle，而不是执行它，所有手柄看起来一样function() { [native code] }

当你调用该函数，而不是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(); 
 
});

来源

2016-11-22 00:57:07 Aruna

从javascript中的对象数组访问绑定函数

回答

相关问题