Comprendre ce "hack" nécessite de comprendre plusieurs choses:
- Pourquoi nous ne faisons pas que
Array(5).map(...)
- Comment
Function.prototype.applygère les arguments
- Comment
Arraygère plusieurs arguments
- Comment la
Numberfonction gère les arguments
- Que
Function.prototype.callfait
Ce sont des sujets assez avancés en javascript, donc ce sera plus que plutôt long. Nous allons commencer par le haut. Bouclez votre ceinture!
1. Pourquoi pas simplement Array(5).map?
Qu'est-ce qu'un tableau, vraiment? Un objet normal, contenant des clés entières, qui correspondent à des valeurs. Il a d'autres fonctionnalités spéciales, par exemple la lengthvariable magique , mais au fond, c'est une key => valuecarte régulière , comme n'importe quel autre objet. Jouons un peu avec les tableaux, d'accord?
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']
Nous arrivons à la différence inhérente entre le nombre d'éléments dans le tableau arr.length, et le nombre de key=>valuemappages du tableau, qui peut être différent de arr.length.
Le développement du tableau via arr.length ne crée pas de nouveaux key=>valuemappages, donc ce n'est pas que le tableau a des valeurs non définies, il n'a pas ces clés . Et que se passe-t-il lorsque vous essayez d'accéder à une propriété inexistante? Vous obtenez undefined.
Maintenant, nous pouvons lever un peu la tête et voir pourquoi des fonctions comme arr.mapne pas marcher sur ces propriétés. Si elle arr[3]était simplement indéfinie et que la clé existait, toutes ces fonctions de tableau la parcourraient comme toute autre valeur:
//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"]
J'ai intentionnellement utilisé un appel de méthode pour prouver davantage le fait que la clé elle-même n'était jamais là: l'appel undefined.toUpperCaseaurait soulevé une erreur, mais ce n'est pas le cas. Pour prouver que :
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
Et maintenant nous arrivons à mon point: comment Array(N)ça va. La section 15.4.2.2 décrit le processus. Il y a un tas de jumbo mumbo dont nous ne nous soucions pas, mais si vous parvenez à lire entre les lignes (ou vous pouvez simplement me faire confiance sur celui-ci, mais ne le faites pas), cela se résume essentiellement à ceci:
function Array(len) {
var ret = [];
ret.length = len;
return ret;
}
(fonctionne sous l'hypothèse (qui est vérifiée dans la spécification réelle) qui lenest un uint32 valide, et pas n'importe quel nombre de valeur)
Alors maintenant, vous pouvez voir pourquoi cela Array(5).map(...)ne fonctionnerait pas - nous ne définissons pas les lenéléments sur le tableau, nous ne créons pas les key => valuemappages, nous modifions simplement la lengthpropriété.
Maintenant que nous avons cela de côté, regardons la deuxième chose magique:
2. Comment Function.prototype.applyfonctionne
Ce qui applyfait, c'est prendre un tableau et le dérouler en tant qu'arguments d'un appel de fonction. Cela signifie que les éléments suivants sont à peu près les mêmes:
function foo (a, b, c) {
return a + b + c;
}
foo(0, 1, 2); //3
foo.apply(null, [0, 1, 2]); //3
Maintenant, nous pouvons faciliter le processus de voir comment applyfonctionne en enregistrant simplement la argumentsvariable spéciale:
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]
Il est facile de prouver ma réclamation dans l'avant-dernier exemple:
function ahaExclamationMark () {
console.log(arguments.length);
console.log(arguments.hasOwnProperty(0));
}
ahaExclamationMark.apply(null, Array(2)); //2, true
(oui, jeu de mots prévu). Le key => valuemappage n'a peut-être pas existé dans le tableau auquel nous sommes passés apply, mais il existe certainement dans la argumentsvariable. C'est la même raison pour laquelle le dernier exemple fonctionne: les clés n'existent pas sur l'objet que nous passons, mais elles existent dans arguments.
Pourquoi donc? Regardons la section 15.3.4.3 , où Function.prototype.applyest définie. Surtout des choses qui ne nous intéressent pas, mais voici la partie intéressante:
- Soit len le résultat de l'appel de la méthode interne [[Get]] de argArray avec l'argument "length".
Ce qui signifie essentiellement: argArray.length. La spécification procède ensuite à une simple forboucle sur les lengthéléments, en faisant un listdes valeurs correspondantes ( listest un vaudou interne, mais c'est fondamentalement un tableau). En termes de code très, très lâche:
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);
};
Donc, tout ce dont nous avons besoin pour imiter un argArraydans ce cas est un objet avec une lengthpropriété. Et maintenant, nous pouvons voir pourquoi les valeurs ne sont pas définies, mais les clés ne le sont pas arguments: nous créons les key=>valuemappages.
Ouf, cela n'aurait peut-être pas été plus court que la partie précédente. Mais il y aura du gâteau quand nous aurons fini, alors soyez patient! Cependant, après la section suivante (qui sera courte, je le promets), nous pouvons commencer à disséquer l'expression. Au cas où vous auriez oublié, la question était de savoir comment fonctionne ce qui suit:
Array.apply(null, { length: 5 }).map(Number.call, Number);
3. Comment Arraygère plusieurs arguments
Alors! Nous avons vu ce qui se passe lorsque vous passez un lengthargument à Array, mais dans l'expression, nous passons plusieurs choses en arguments (un tableau de 5 undefined, pour être exact). La section 15.4.2.1 nous dit quoi faire. Le dernier paragraphe est tout ce qui compte pour nous, et il est formulé de manière très étrange, mais il se résume en quelque sorte à:
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! Nous obtenons un tableau de plusieurs valeurs indéfinies, et nous renvoyons un tableau de ces valeurs indéfinies.
La première partie de l'expression
Enfin, nous pouvons déchiffrer ce qui suit:
Array.apply(null, { length: 5 })
Nous avons vu qu'il renvoie un tableau contenant 5 valeurs indéfinies, avec des clés toutes existantes.
Passons maintenant à la deuxième partie de l'expression:
[undefined, undefined, undefined, undefined, undefined].map(Number.call, Number)
Ce sera la partie la plus facile et non alambiquée, car elle ne repose pas tellement sur des hacks obscurs.
4. Comment Numbertraite l'entrée
Faire Number(something)( section 15.7.1 ) convertit somethingen nombre, et c'est tout. Comment faire cela est un peu compliqué, en particulier dans le cas des chaînes, mais l'opération est définie dans la section 9.3 au cas où cela vous intéresserait.
5. Jeux de Function.prototype.call
callest applyle frère de, défini à la section 15.3.4.4 . Au lieu de prendre un tableau d'arguments, il prend simplement les arguments reçus et les transmet.
Les choses deviennent intéressantes lorsque vous en chaînez plus d'un callensemble, augmentez l'étrange à 11:
function log () {
console.log(this, arguments);
}
log.call.call(log, {a:4}, {a:5});
//{a:4}, [{a:5}]
//^---^ ^-----^
// this arguments
Cela vaut vraiment la peine tant que vous ne comprenez pas ce qui se passe. log.callest juste une fonction, équivalente à la callméthode de toute autre fonction , et en tant que telle, a également une callméthode sur elle-même:
log.call === log.call.call; //true
log.call === Function.call; //true
Et que fait call-on? Il accepte un thisArget un tas d'arguments et appelle sa fonction parente. Nous pouvons le définir via apply (encore une fois, un code très lâche, ne fonctionnera pas):
Function.prototype.call = function (thisArg) {
var args = arguments.slice(1); //I wish that'd work
return this.apply(thisArg, args);
};
Voyons comment cela se passe:
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}])
La dernière partie, ou le .mapde tout
Ce n'est pas encore fini. Voyons ce qui se passe lorsque vous fournissez une fonction à la plupart des méthodes de tableau:
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
Si nous ne fournissons pas d' thisargument nous-mêmes, la valeur par défaut est window. Prenez note de l'ordre dans lequel les arguments sont fournis à notre rappel, et répétons-le jusqu'à 11:
arr.forEach(log.call, log);
//'a', [0, ['a', 'b', 'c']]
//'b', [1, ['a', 'b', 'c']]
//'b', [2, ['a', 'b', 'c']]
// ^ ^
Whoa whoa whoa ... reculons un peu. Que se passe t-il ici? Nous pouvons voir dans la section 15.4.4.18 , où forEachest défini, ce qui suit à peu près se produit:
var callback = log.call,
thisArg = log;
for (var i = 0; i < arr.length; i += 1) {
callback.call(thisArg, arr[i], i, arr);
}
Donc, nous obtenons ceci:
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);
Maintenant, nous pouvons voir comment .map(Number.call, Number)fonctionne:
Number.call.call(Number, arr[i], i, arr);
Number.call(arr[i], i, arr);
Number(i, arr);
Ce qui renvoie la transformation de i, l'index actuel, en un nombre.
En conclusion,
L'expression
Array.apply(null, { length: 5 }).map(Number.call, Number);
Fonctionne en deux parties:
var arr = Array.apply(null, { length: 5 }); //1
arr.map(Number.call, Number); //2
La première partie crée un tableau de 5 éléments non définis. Le second parcourt ce tableau et prend ses indices, ce qui donne un tableau d'indices d'élément:
[0, 1, 2, 3, 4]
Array.apply(null, Array(30)).map(Number.call, Number)est plus facile à lire car il évite de prétendre qu'un objet simple est un tableau.