"[] .forEach"

Question

Я видел этот сценарий где-то еще, и он будет проверять каждые отдельные флажки:

[].forEach.call(document.querySelectorAll('input[type="checkbox"]'),function(el){ 
     el.checked=true; 
    } 
);​ 

Я знаю, как использовать forEach:

[0,1,2].forEach(function(num){ 
    console.log(num); 
}); 

//0 
//1 
//2 

Но теперь , [].forEach, и внутри ничего нет. Так почему же он все еще работает? Почему я не могу это сделать?

document.querySelectorAll('input[type="checkbox"]').forEach(function(el){ 
     el.checked=true; 
    } 
);​ 

Answer 1

JavaScript имеет первоклассные функции; то есть они рассматриваются как объекты и могут иметь свои собственные свойства и методы. Встроенный метод Function.call принимает параметр this для функции в качестве своего первого аргумента, а остальные аргументы передаются самой функции. Массив [] не используется, кроме как средство доступа к (менее сжатому, поэтому менее используемому) методу Array.prototype.forEach.

Это в основном восстановление Array.forEach для использования на чем-то, что не является массивом, в данном случае NodeList. Если NodeList s предложен метод forEach, то это было бы эквивалентно, и вы можете прочитать его как это:

document.querySelectorAll('input[type="checkbox"]').forEach(function(el) { 
    el.checked = true; 
});​ 

---

Так, чуть больше в глубину. call выполняет функцию с другим контекстом. forEach выполняет итерацию по контексту и вызывает функцию, которая передается в качестве аргумента. Таким образом, someFunc.call(thisArg, otherArg) будет выполнен, как если бы он был в контексте thisArg, например thisArg.someFunc(otherArg). Вот простейший пример:

function callMe(something) { 
    return something + this; 
} 

callMe('Hello'); // Hellonull or Hello[object Window] or something 
callMe.call({}, 'World'); // World[object Object] 

apply() работает точно так же, но передать массив аргументов в качестве второго аргумента.

Answer 2

Обратите внимание: .call. Он применяет (устанавливает в) результаты document.querySelectorAll в forEach, так что он выполняет итерацию по этим результатам, а не (пустой) массив в левой части точки.

Answer 3

Это просто используется [], чтобы получить функцию forEach. Как только он имеет функцию, он использует .call, чтобы назвать его, как если бы это был метод document.querySelectorAll('input[type="checkbox"]').

Это полезно, потому что результат document.querySelectorAll не является Array, но ведет себя как один, поэтому мы можем использовать стандартные методы Array.

Когда вы используете .call, первый аргумент используется как значение this. То есть в этом конкретном фрагменте каждый раз, когда this встречается внутри источника forEach, он установлен в document.querySelectorAll('input[type="checkbox"]').

Вы не можете просто позвонить document.querySelectorAll('input[type="checkbox"]').forEach(... напрямую, потому что querySelectorAll делает не возвращать Array объект и поэтому не имеет методы forEach.Вся вещь .call - это всего лишь способ обойти это, позвонив forEachкак будто это был метод NodeList, который является тем, что действительно возвращается.