2016-11-22 3 views
3

У меня есть массив объектов, содержащих ссылки (связанные методом .bind()) с моими функциями класса. Когда я обращаюсь к ним напрямую, например array[3].myFunction, все работает нормально. Но странное поведение возникает, когда я пытаюсь получить доступ к этой функции, итерации по массиву. Я пробовал Array.forEach(), для-in, for-of и 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

+1

Так как вы на самом деле не называть эти функции, все это я получаю 'функция() {[машинный код]}' (связанная функция объект) каждый раз. Невозможно отличить его от других. – Bergi

+4

Если вы на самом деле вызываете функцию в этих циклах, а не только регистрируете ее, ожидается ожидаемый результат. Моя догадка - ошибка в 'toString()', по крайней мере в моей версии Chrome. Вы можете указать, что в Chrome, по крайней мере, каждый раз отображается тело функции 'function1'. – Jacob

+0

@Bergi см. Результат, то есть в консоли Chrome –

ответ

0

Имейте посмотреть ниже. Кажется, все работает.

Когда вы 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(); 
 
});