Почему не работает console.log при передаче в качестве параметра forEach?

Question

Это просто из любопытства, но у любого из вас есть идея, почему этот код не будет работать?

[1, 2, 3, 4, 5].forEach(console.log); 

// Prints 'Uncaught TypeError: Illegal invocation' in Chrome 

С другой стороны, это, кажется, работает нормально:

[1, 2, 3, 4, 5].forEach(function(n) { console.log(n) }); 

Так что ...?

Answer 1

На самом деле, как @SLaks отметил, console.log, похоже, использует this внутри и когда она передается в качестве параметра this теперь ссылается на экземпляр массива.

Обойти это просто:

var c = console.log.bind(console); [1,2,3,4,5].forEach(c);

Answer 2

Я не могу сказать, что видел этот синтаксис, но я предполагаю, что журнал ожидает параметр, являющийся сообщением/объектом/etc для входа в консоль.

В первом примере вы просто передаете ссылку на функцию forEach, что прекрасно, если ваша функция не ожидает изменения параметров, которые заставляют функцию вести себя так, как ожидалось. Во втором примере вы проходите e, а затем регистрируете его.

Answer 3

Это работает:

[1,2,3,4,5].forEach(console.log.bind(console)); 

Answer 4

Стоит отметить, что есть разница в поведении при осуществлении console.log. В узле v0.10.19 вы не получите ошибку; вы просто увидите:

> [1,2,3,4,5].forEach(console.log); 
1 0 [ 1, 2, 3, 4, 5 ] 
2 1 [ 1, 2, 3, 4, 5 ] 
3 2 [ 1, 2, 3, 4, 5 ] 
4 3 [ 1, 2, 3, 4, 5 ] 
5 4 [ 1, 2, 3, 4, 5 ] 

Это происходит потому, что обратный вызов forEach является функция трехпараметрическая принимает значение, индекс, а сам массив. Функция console.log видит эти три параметра и послушно регистрирует их.

Под консоли браузера Chrome, однако, вы получите

> [1,2,3,4,5].forEach(console.log); 
TypeError: Illegal invocation 

и в этом случае, bindбудет работа:

> [1,2,3,4,5].forEach(console.log.bind(console)); 
1 0 [ 1, 2, 3, 4, 5 ] 
2 1 [ 1, 2, 3, 4, 5 ] 
3 2 [ 1, 2, 3, 4, 5 ] 
4 3 [ 1, 2, 3, 4, 5 ] 
5 4 [ 1, 2, 3, 4, 5 ] 

но есть альтернативный способ: обратите внимание, что второй параметр до forEach принимает значение this для использования в обратном канале:

> [1,2,3,4,5].forEach(console.log, console) 
1 0 [ 1, 2, 3, 4, 5 ] 
2 1 [ 1, 2, 3, 4, 5 ] 
3 2 [ 1, 2, 3, 4, 5 ] 
4 3 [ 1, 2, 3, 4, 5 ] 
5 4 [ 1, 2, 3, 4, 5 ] 

, который работает на консоли Chrome и узле для меня. Конечно, я уверен, что вы хотите всего значения, так что я боюсь, что самое лучшее решение, на самом деле:

> [1,2,3,4,5].forEach(function (e) {console.log(e)}); 
1 
2 
3 
4 
5 

ли поведение узла является ошибкой, или он просто использует в своих интересах факт, что console.log не указан ECMA, интересен сам по себе.Но различное поведение и тот факт, что вы должны знать, имеет ли ваш обратный вызов this, является важным и означает, что мы должны вернуться к прямому кодированию, даже если он является подробным благодаря ключевому слову function.