javascriptでオブジェクトの配列からバインドされた関数にアクセスする

Question

私はクラスの関数に参照を含むオブジェクトの配列を持っています（.bind()メソッドでバインドされています）。 array[3].myFunctionのように直接アクセスすると、すべて正常に動作します。しかし、奇妙な動作は、配列上でこれらの関数の反復処理にアクセスしようとすると発生します。私はArray.forEach()、for-of、for、ofとArray.map()関数で試しましたが、結果は常に同じです - 私は最初の関数を4回取得します。私はここで間違って何をしていますか？前もって感謝します。

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ではなく、すべてのハンドルがあなたの代わりにel.myFunction()機能を呼び出すと、あなたは彼らが正しい機能や印刷を呼び出しているすべてを見ることができますfunction() { [native code] }

と同じように見えるところにそれを実行するを表示します結果をそれぞれ示します。

以下の機能呼び出しを確認することができます。

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(); 
 
});