從javascript中的對象數組訪問綁定函數

Question

我有一個對象數組包含引用（由.bind()方法綁定）到我的類函數。 當我直接訪問它們時，比如array[3].myFunction ，一切正常。 但是當我嘗試訪問迭代數組的這些函數時，會發生奇怪的行為。 我已經嘗試過Array.forEach() ，for-in， Array.map()和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而不執行它，其中所有句柄看起來與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(); });