從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中的對象數組訪問綁定函數

回答

相關問題