Um diesen "Hack" zu verstehen, müssen Sie verschiedene Dinge verstehen:
- Warum wir es nicht einfach tun
Array(5).map(...)
- Wie geht man
Function.prototype.applymit Argumenten um?
- Wie geht man
Arraymit mehreren Argumenten um?
- Wie die
NumberFunktion mit Argumenten umgeht
- Was
Function.prototype.callmacht
Es handelt sich um ziemlich fortgeschrittene Themen in Javascript, daher wird dies mehr als lang sein. Wir werden von oben beginnen. Anschnallen!
1. Warum nicht einfach Array(5).map?
Was ist eigentlich ein Array? Ein reguläres Objekt, das Ganzzahlschlüssel enthält, die Werten zugeordnet sind. Es hat andere Besonderheiten, zum Beispiel die magische lengthVariable, aber im Kern ist es eine reguläre key => valueKarte, genau wie jedes andere Objekt. Lass uns ein bisschen mit Arrays spielen, sollen wir?
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']
Wir kommen zu dem inhärenten Unterschied zwischen der Anzahl der Elemente im Array arr.lengthund der Anzahl der key=>valueZuordnungen im Array, die sich von unterscheiden können arr.length.
Die Erweiterung des Arrays über arr.length keine keine neuen erstellen key=>valueZuordnungen, so ist es nicht , dass das Array undefinierte Werte hat, es verfügt nicht über diese Tasten . Und was passiert, wenn Sie versuchen, auf eine nicht vorhandene Eigenschaft zuzugreifen? Du verstehst undefined.
Jetzt können wir unsere Köpfe ein wenig heben und sehen, warum Funktionen wie arr.mapdiese Eigenschaften nicht überschreiten. Wenn arr[3]nur undefiniert wäre und der Schlüssel vorhanden wäre, würden alle diese Array-Funktionen wie jeder andere Wert darüber hinweggehen:
//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"]
Ich habe absichtlich einen Methodenaufruf verwendet, um weiter zu beweisen, dass der Schlüssel selbst nie vorhanden war: Das Aufrufen undefined.toUpperCasehätte einen Fehler ausgelöst, aber dies war nicht der Fall. Um zu beweisen , dass :
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
Und jetzt kommen wir zu meinem Punkt: Wie Array(N)geht es den Dingen? Abschnitt 15.4.2.2 beschreibt den Prozess. Es gibt eine Menge Hokuspokus, die uns egal sind, aber wenn Sie es schaffen, zwischen den Zeilen zu lesen (oder Sie können mir in dieser Zeile einfach vertrauen, aber nicht), läuft es im Grunde darauf hinaus:
function Array(len) {
var ret = [];
ret.length = len;
return ret;
}
(arbeitet unter der Annahme (die in der tatsächlichen Spezifikation überprüft wird), dass lenes sich um eine gültige uint32 handelt und nicht um eine beliebige Anzahl von Werten)
Jetzt können Sie sehen, warum dies Array(5).map(...)nicht funktioniert - wir definieren keine lenElemente im Array, wir erstellen keine key => valueZuordnungen, wir ändern einfach die lengthEigenschaft.
Nachdem wir das aus dem Weg geräumt haben, schauen wir uns die zweite magische Sache an:
2. Wie Function.prototype.applyfunktioniert
Im applyGrunde genommen wird ein Array genommen und als Argument eines Funktionsaufrufs abgewickelt. Das bedeutet, dass Folgendes ziemlich gleich ist:
function foo (a, b, c) {
return a + b + c;
}
foo(0, 1, 2); //3
foo.apply(null, [0, 1, 2]); //3
Jetzt können wir den Prozess der Funktionsweise applyvereinfachen, indem wir einfach die argumentsspezielle Variable protokollieren :
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]
Es ist einfach, meine Behauptung im vorletzten Beispiel zu beweisen:
function ahaExclamationMark () {
console.log(arguments.length);
console.log(arguments.hasOwnProperty(0));
}
ahaExclamationMark.apply(null, Array(2)); //2, true
(Ja, Wortspiel beabsichtigt). Das key => valueMapping war möglicherweise nicht in dem Array vorhanden, an das wir übergeben haben apply, aber es ist sicherlich in der argumentsVariablen vorhanden. Es ist der gleiche Grund, warum das letzte Beispiel funktioniert: Die Schlüssel sind für das Objekt, das wir übergeben, nicht vorhanden, aber sie sind in vorhanden arguments.
Warum ist das so? Schauen wir uns Abschnitt 15.3.4.3 an , in dem Function.prototype.applydefiniert ist. Meistens Dinge, die uns egal sind, aber hier ist der interessante Teil:
- Sei len das Ergebnis des Aufrufs der internen Methode [[Get]] von argArray mit dem Argument "length".
Was im Grunde bedeutet : argArray.length. Die Spezifikation führt dann eine einfache forSchleife über lengthElemente durch und erstellt einen listder entsprechenden Werte ( listist ein interner Voodoo, aber im Grunde ist es ein Array). In Bezug auf sehr, sehr losen Code:
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);
};
argArrayIn diesem Fall müssen wir also nur ein Objekt mit einer lengthEigenschaft nachahmen . Und jetzt können wir sehen, warum die Werte undefiniert sind, die Schlüssel jedoch nicht. argumentsWir erstellen die key=>valueZuordnungen.
Puh, das war vielleicht nicht kürzer als der vorherige Teil. Aber wenn wir fertig sind, wird es Kuchen geben, also sei geduldig! Nach dem folgenden Abschnitt (der, wie ich verspreche, kurz sein wird) können wir jedoch beginnen, den Ausdruck zu zerlegen. Falls Sie es vergessen haben, war die Frage, wie Folgendes funktioniert:
Array.apply(null, { length: 5 }).map(Number.call, Number);
3. Wie geht man Arraymit mehreren Argumenten um?
So! Wir haben gesehen, was passiert, wenn Sie ein lengthArgument an übergeben Array, aber im Ausdruck übergeben wir mehrere Dinge als Argumente (ein Array von 5 undefined, um genau zu sein). In Abschnitt 15.4.2.1 erfahren Sie , was zu tun ist. Der letzte Absatz ist alles, was uns wichtig ist, und er ist wirklich seltsam formuliert , aber es läuft irgendwie auf Folgendes hinaus:
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]
Tada! Wir erhalten ein Array mit mehreren undefinierten Werten und geben ein Array dieser undefinierten Werte zurück.
Der erste Teil des Ausdrucks
Schließlich können wir Folgendes entschlüsseln:
Array.apply(null, { length: 5 })
Wir haben gesehen, dass es ein Array zurückgibt, das 5 undefinierte Werte enthält, wobei alle Schlüssel vorhanden sind.
Nun zum zweiten Teil des Ausdrucks:
[undefined, undefined, undefined, undefined, undefined].map(Number.call, Number)
Dies wird der einfachere, nicht verschlungene Teil sein, da er nicht so sehr auf obskuren Hacks beruht.
4. Wie Numberbehandelt man Eingaben?
Doing Number(something)( Abschnitt 15.7.1 ) konvertiert somethingin eine Zahl, und das ist alles. Wie das geht, ist etwas kompliziert, besonders bei Strings, aber die Operation wird in Abschnitt 9.3 definiert, falls Sie interessiert sind.
5. Spiele von Function.prototype.call
callist sein applyBruder, definiert in Abschnitt 15.3.4.4 . Anstatt ein Array von Argumenten zu verwenden, werden nur die empfangenen Argumente verwendet und weitergeleitet.
Die Dinge werden interessant, wenn Sie mehr als eine callaneinander ketten und das Unheimliche auf 11 drehen:
function log () {
console.log(this, arguments);
}
log.call.call(log, {a:4}, {a:5});
//{a:4}, [{a:5}]
//^---^ ^-----^
// this arguments
Dies ist ziemlich wertvoll, bis Sie verstehen, was los ist. log.callist nur eine Funktion, die der callMethode einer anderen Funktion entspricht , und hat als solche auch eine callMethode für sich:
log.call === log.call.call; //true
log.call === Function.call; //true
Und was macht calldas? Es akzeptiert eine thisArgReihe von Argumenten und ruft seine übergeordnete Funktion auf. Wir können es definieren über apply (wieder sehr lockerer Code, funktioniert nicht):
Function.prototype.call = function (thisArg) {
var args = arguments.slice(1); //I wish that'd work
return this.apply(thisArg, args);
};
Lassen Sie uns verfolgen, wie dies abläuft:
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}])
Der spätere Teil oder das .mapvon allem
Es ist noch nicht vorbei. Mal sehen, was passiert, wenn Sie den meisten Array-Methoden eine Funktion bereitstellen:
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
Wenn wir selbst kein thisArgument angeben, wird standardmäßig verwendet window. Beachten Sie die Reihenfolge, in der die Argumente für unseren Rückruf bereitgestellt werden, und lassen Sie es uns noch einmal bis 11 verrückt machen:
arr.forEach(log.call, log);
//'a', [0, ['a', 'b', 'c']]
//'b', [1, ['a', 'b', 'c']]
//'b', [2, ['a', 'b', 'c']]
// ^ ^
Whoa whoa whoa ... lass uns ein bisschen zurücktreten. Was ist denn hier los? Wir können in Abschnitt 15.4.4.18 sehen , wo forEachFolgendes definiert ist:
var callback = log.call,
thisArg = log;
for (var i = 0; i < arr.length; i += 1) {
callback.call(thisArg, arr[i], i, arr);
}
Also, wir bekommen das:
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);
Jetzt können wir sehen, wie es .map(Number.call, Number)funktioniert:
Number.call.call(Number, arr[i], i, arr);
Number.call(arr[i], i, arr);
Number(i, arr);
Dies gibt die Umwandlung des iaktuellen Index in eine Zahl zurück.
Abschließend,
Der Ausdruck
Array.apply(null, { length: 5 }).map(Number.call, Number);
Arbeitet in zwei Teilen:
var arr = Array.apply(null, { length: 5 }); //1
arr.map(Number.call, Number); //2
Der erste Teil erstellt ein Array von 5 undefinierten Elementen. Der zweite geht über dieses Array und nimmt seine Indizes, was zu einem Array von Elementindizes führt:
[0, 1, 2, 3, 4]
Array.apply(null, Array(30)).map(Number.call, Number)ist einfacher zu lesen, da nicht vorgetäuscht wird, ein einfaches Objekt sei ein Array.