この「ハック」を理解するには、いくつかのことを理解する必要があります。
- なぜ私たちはしないのですか
Array(5).map(...)
Function.prototype.applyが引数を処理する方法Array複数の引数を処理する方法Number関数が引数を処理する方法- 何
Function.prototype.callん
それらはJavaScriptのかなり高度なトピックであるため、これはかなり長くなります。上から始めましょう。シートベルトを締める！
1.なぜただではないのArray(5).mapですか？
本当に配列とは何ですか？値にマップする整数キーを含む通常のオブジェクト。魔法のlength変数など、他の特別な機能がありますが、コアとなるのは、key => value他のオブジェクトと同じように、通常のマップです。配列を少し遊んでみましょうか。
var arr = ['a', 'b', 'c'];
arr.hasOwnProperty(0); //true
arr[0]; //'a'
Object.keys(arr); //['0', '1', '2']
arr.length; //3, implies arr[3] === undefined
//we expand the array by 1 item
arr.length = 4;
arr[3]; //undefined
arr.hasOwnProperty(3); //false
Object.keys(arr); //['0', '1', '2']
配列内のアイテムarr.length数とkey=>value、配列が持つマッピング数の固有の違いに到達しarr.lengthます。これはとは異なる場合があります。
配列を展開しても新しいマッピングarr.length は作成されないためkey=>value、配列に未定義の値があるわけではなく、これらのキーはありません。そして、存在しないプロパティにアクセスしようとするとどうなりますか？あなたが得るundefined。
これで少し頭を上げて、関数arr.mapがこれらのプロパティの上を歩かないような理由を確認できます。場合はarr[3]、単に未定義、およびキーが存在していた、すべてのこれらの配列関数は、他の値と同様にそれを上に行くだろう。
//just to remind you
arr; //['a', 'b', 'c', undefined];
arr.length; //4
arr[4] = 'e';
arr; //['a', 'b', 'c', undefined, 'e'];
arr.length; //5
Object.keys(arr); //['0', '1', '2', '4']
arr.map(function (item) { return item.toUpperCase() });
//["A", "B", "C", undefined, "E"]
メソッド呼び出しを意図的に使用して、キー自体がそこにないことをさらに証明しました。呼び出しでundefined.toUpperCaseはエラーが発生しましたが、発生しませんでした。それを証明するには：
arr[5] = undefined;
arr; //["a", "b", "c", undefined, "e", undefined]
arr.hasOwnProperty(5); //true
arr.map(function (item) { return item.toUpperCase() });
//TypeError: Cannot call method 'toUpperCase' of undefined
そして今、私たちは私の要点に到達しArray(N)ます。セクション15.4.2.2でプロセスについて説明します。私たちが気にしていない大量のジャンボジャンボがありますが、行間を読み通すことができた場合（または、この行を信頼してもかまいませんが）、基本的には次のようになります。
function Array(len) {
var ret = [];
ret.length = len;
return ret;
}
（len有効なuint32であり、値の数だけではないという仮定（実際の仕様でチェックされています）の下で動作します）
これで、これArray(5).map(...)が機能しない理由がわかります。len配列に項目を定義せず、key => valueマッピングを作成せず、lengthプロパティを変更するだけです。
それが邪魔にならないようになったら、2番目の魔法のことを見てみましょう。
2.どのようFunction.prototype.applyな作品
どのようなapply行いは、基本的に配列を取り、関数呼び出しの引数として、それをアンロールされます。つまり、以下はほとんど同じです。
function foo (a, b, c) {
return a + b + c;
}
foo(0, 1, 2); //3
foo.apply(null, [0, 1, 2]); //3
これでapply、arguments特別な変数をログに記録するだけで、動作を確認するプロセスを簡単にすることができます。
function log () {
console.log(arguments);
}
log.apply(null, ['mary', 'had', 'a', 'little', 'lamb']);
//["mary", "had", "a", "little", "lamb"]
//arguments is a pseudo-array itself, so we can use it as well
(function () {
log.apply(null, arguments);
})('mary', 'had', 'a', 'little', 'lamb');
//["mary", "had", "a", "little", "lamb"]
//a NodeList, like the one returned from DOM methods, is also a pseudo-array
log.apply(null, document.getElementsByTagName('script'));
//[script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script]
//carefully look at the following two
log.apply(null, Array(5));
//[undefined, undefined, undefined, undefined, undefined]
//note that the above are not undefined keys - but the value undefined itself!
log.apply(null, {length : 5});
//[undefined, undefined, undefined, undefined, undefined]
最後から2番目の例で私の主張を証明するのは簡単です。
function ahaExclamationMark () {
console.log(arguments.length);
console.log(arguments.hasOwnProperty(0));
}
ahaExclamationMark.apply(null, Array(2)); //2, true
（はい、しゃれつもりです）。key => valueマッピングは、我々が渡さ配列に存在していないかもしれませんapplyが、それは確かに存在するarguments変数。これは、最後の例が機能するのと同じ理由argumentsです。渡したオブジェクトにはキーは存在しませんが、には存在します。
何故ですか？で見てみましょうセクション15.3.4.3、Function.prototype.apply定義されます。主に私たちが気にしないことですが、ここに興味深い部分があります：
- lenを、引数「length」を指定してargArrayの[[Get]]内部メソッドを呼び出した結果とします。
基本的には次のことを意味しますargArray.length。その後、仕様はアイテムに対して単純なforループを実行し、対応する値のをlength作成しlistます（list内部のブードゥーですが、基本的には配列です）。非常に非常に緩いコードに関して：
Function.prototype.apply = function (thisArg, argArray) {
var len = argArray.length,
argList = [];
for (var i = 0; i < len; i += 1) {
argList[i] = argArray[i];
}
//yeah...
superMagicalFunctionInvocation(this, thisArg, argList);
};
したがってargArray、この場合に模倣する必要があるのは、lengthプロパティを持つオブジェクトだけです。これで、値が未定義である理由がわかりますが、キーは未定義です。マッピングargumentsを作成しますkey=>value。
ふew、これは前の部分より短くなかったかもしれません。しかし、終了するとケーキができるので、しばらくお待ちください。ただし、次のセクション（短くなるとお約束します）の後で、式の分析を開始できます。忘れてしまった場合、問題は次のように機能することでした。
Array.apply(null, { length: 5 }).map(Number.call, Number);
3. Array複数の引数を処理する方法
そう！length引数をArrayに渡すとどうなるかを見ましたが、式では、いくつかのものを引数として渡します（undefined正確には5の配列）。セクション15.4.2.1は何をすべきかを教えてくれます。最後の段落は私たちにとって重要なすべてのことであり、それは本当に奇妙な言葉で書かれていますが、結局は次のようになります。
function Array () {
var ret = [];
ret.length = arguments.length;
for (var i = 0; i < arguments.length; i += 1) {
ret[i] = arguments[i];
}
return ret;
}
Array(0, 1, 2); //[0, 1, 2]
Array.apply(null, [0, 1, 2]); //[0, 1, 2]
Array.apply(null, Array(2)); //[undefined, undefined]
Array.apply(null, {length:2}); //[undefined, undefined]
多田！いくつかの未定義の値の配列を取得し、これらの未定義の値の配列を返します。
式の最初の部分
最後に、以下を解読できます。
Array.apply(null, { length: 5 })
キーがすべて存在する5つの未定義の値を含む配列を返すことがわかりました。
次に、式の2番目の部分に移動します。
[undefined, undefined, undefined, undefined, undefined].map(Number.call, Number)
これは、わかりにくいハッキングにあまり依存しないため、より複雑で複雑な部分ではありません。
4. Number入力の扱い
実行Number(something)（セクション15.7.1）somethingは数値に変換され、それがすべてです。それがどのように行われるかは、特に文字列の場合には少し複雑ですが、興味がある場合のために操作はセクション9.3で定義されています。
5.のゲーム Function.prototype.call
callあるapplyのは、で定義された弟、セクション15.3.4.4。引数の配列を受け取る代わりに、受け取った引数を受け取り、それらを転送します。
チェーンを複数callつなげて奇妙なものを最大11までクランクすると、物事が面白くなります。
function log () {
console.log(this, arguments);
}
log.call.call(log, {a:4}, {a:5});
//{a:4}, [{a:5}]
//^---^ ^-----^
// this arguments
何が起こっているのかを理解するまで、これはかなり価値があります。log.call他の関数のcallメソッドと同等の単なる関数であり、そのため、callそれ自体にもメソッドがあります。
log.call === log.call.call; //true
log.call === Function.call; //true
そして、何をしcallますか？これは、thisArgと一連の引数を受け入れ、その親関数を呼び出します。それを定義することもできますapply （ここでも、非常に緩いコードは機能しません）。
Function.prototype.call = function (thisArg) {
var args = arguments.slice(1); //I wish that'd work
return this.apply(thisArg, args);
};
これがどのように下がるかを追跡してみましょう：
log.call.call(log, {a:4}, {a:5});
this = log.call
thisArg = log
args = [{a:4}, {a:5}]
log.call.apply(log, [{a:4}, {a:5}])
log.call({a:4}, {a:5})
this = log
thisArg = {a:4}
args = [{a:5}]
log.apply({a:4}, [{a:5}])
後の部分、またはその.mapすべて
まだ終わっていません。ほとんどの配列メソッドに関数を指定するとどうなるか見てみましょう。
function log () {
console.log(this, arguments);
}
var arr = ['a', 'b', 'c'];
arr.forEach(log);
//window, ['a', 0, ['a', 'b', 'c']]
//window, ['b', 1, ['a', 'b', 'c']]
//window, ['c', 2, ['a', 'b', 'c']]
//^----^ ^-----------------------^
// this arguments
this自分で引数を指定しない場合、デフォルトでになりwindowます。引数がコールバックに提供される順序に注意してください。もう一度、11まで奇妙にしましょう。
arr.forEach(log.call, log);
//'a', [0, ['a', 'b', 'c']]
//'b', [1, ['a', 'b', 'c']]
//'b', [2, ['a', 'b', 'c']]
// ^ ^
おっと、おっと、おっと...ちょっとバックアップしましょう。何が起きてる？セクション15.4.4.18で、forEachが定義されているところを見ると、次のことがほとんど起こります。
var callback = log.call,
thisArg = log;
for (var i = 0; i < arr.length; i += 1) {
callback.call(thisArg, arr[i], i, arr);
}
したがって、これを取得します。
log.call.call(log, arr[i], i, arr);
//After one `.call`, it cascades to:
log.call(arr[i], i, arr);
//Further cascading to:
log(i, arr);
これでどのように.map(Number.call, Number)機能するかがわかります：
Number.call.call(Number, arr[i], i, arr);
Number.call(arr[i], i, arr);
Number(i, arr);
これは、i現在のインデックスであるの変換を数値に返します。
結論として、
表現
Array.apply(null, { length: 5 }).map(Number.call, Number);
2つの部分で機能します。
var arr = Array.apply(null, { length: 5 }); //1
arr.map(Number.call, Number); //2
最初の部分では、5つの未定義アイテムの配列を作成します。2つ目はその配列を調べ、そのインデックスを取得して、要素インデックスの配列を作成します。
[0, 1, 2, 3, 4]
Array.apply(null, Array(30)).map(Number.call, Number)は、プレーンオブジェクトが配列であるかのように見せかけることを避けるため、読みやすくなっています。