有効な[] .forEach.call関数の引数は何ですか？

Question

有効な関数の引数は何ですか？以下のコードでelはNodelistまたはノードリストの要素ですか？

[].forEach.call(
    document.getElementById('menu').querySelectorAll('.custom-can-transform'), 
     function(el){ 
      el.classList.toggle('pure-menu-horizontal'); 
     } 
    ); 
) 

Answer 1

多くの配列メソッドは設計上の一般的なものです。つまり、内部実装がthisであることがArrayインスタンスに依存していないことを意味します。基本的に、このような実装では、このオブジェクトには数値インデックスとlengthプロパティが必要です。そのようなオブジェクトは、「配列のようなオブジェクト」と呼ばれます。

この要件を満たす多くのオブジェクトがあります。例えば、NodeListは、あなたが観測した場合、document.getElementById('menu').querySelectorAllです。これは、個々のノードにインデックスでアクセスすることができ、そのノードリストにlengthというプロパティがあるため、配列のようなオブジェクトです。

いずれの文字列も配列のようなオブジェクトです。たとえば、文字列 "hello world"です。文字「w」にstr[t]としてアクセスできます。 str.lengthは11に等しい。

プロパティは、メソッドの実装によって、このコレクションが実際に何であるかを知る必要なく、コレクションのすべての要素を繰り返し処理することができます。

const obj = {0: 'one', 1: 'two', length: 2}; 
 

 
Array.prototype.forEach.call(obj, (el, index) => { 
 
    console.log(`${index}: ${el}`) 
 
})

あるいは、そのような「借り」他のプロトタイプメソッドの最も一般的な使用以外の配列のメソッドを使用している：

また、異なるオブジェクト上の一般的なメソッドを使用することを可能にします配列、通常はDOM要素：

const items = document.querySelector('ul > li') 

const ids = [].map.call(items, li => li.id) 

---

ここで私は、ES2015仕様のspread operatorがそのような借用方法を必要としないことに注意してください。

Answer 2

Function.prototype.callは、関数の変数thisを最初の引数に置き換え、残りの引数をすべて.call()に指定して関数を呼び出します。

これは、上記のコードは、これに評価することを意味する：それはforEachコールをプレフィックスとして.call()方法を使用することなく、forEachのthis変数は、[]であろうこと

document.getElementById('menu').querySelectorAll('.custom-can-transform').forEach(function(el){ 
    el.classList.toggle('pure-menu-horizontal'); 
}); 

注。

配列上のforEachの引数は何ですか？

2つの引数のみを受け入れます。最初の引数は、配列の各要素に対して呼び出される関数callbackです。 2番目の（オプションの）引数は、this変数をコールバックメソッドの関数本体に注入するために使用されます。 source