Чтобы понять этот «хакерский прием», необходимо понять несколько вещей:
- Почему мы просто не делаем
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]был просто undefined и ключ существовал, все эти функции массива просто перебирали бы его, как любое другое значение:
//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. Как 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]
Мое утверждение легко доказать на предпоследнем примере:
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 будет результатом вызова внутреннего метода [[Get]] для argArray с аргументом length.
Который в основном означает: 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сопоставления.
Уф, так что это могло быть не короче предыдущей. Но когда мы закончим, будет торт, так что наберитесь терпения! Однако после следующего раздела (который, я обещаю, будет коротким) мы можем приступить к анализу выражения. Если вы забыли, вопрос был в том, как работает следующее:
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 неопределенных значений со всеми существующими ключами.
Теперь перейдем ко второй части выражения:
[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);
Работает в двух частях:
var arr = Array.apply(null, { length: 5 }); //1
arr.map(Number.call, Number); //2
Первая часть создает массив из 5 неопределенных элементов. Второй проходит по этому массиву и берет его индексы, в результате получается массив индексов элементов:
[0, 1, 2, 3, 4]
Array.apply(null, Array(30)).map(Number.call, Number)легче читать, поскольку он избегает притворяться, что простой объект является массивом.