Розуміння цього "зламу" вимагає розуміння кількох речей:
- Чому ми не просто робимо
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. Як 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, але в виразі ми передаємо декілька речей як аргументи (а саме масив із 5 undefined). Розділ 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
Це цілком варте wtf, поки ви не зрозумієте, що відбувається. 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)легше читати, оскільки він уникає прикидання, що звичайний об’єкт - це масив.