Memahami "peretasan" ini membutuhkan pemahaman beberapa hal:
- Kenapa kita tidak melakukannya saja
Array(5).map(...)
- Bagaimana
Function.prototype.applymenangani argumen
- Bagaimana
Arraymenangani beberapa argumen
- Bagaimana
Numberfungsinya menangani argumen
- Apa
Function.prototype.calltidak
Mereka adalah topik yang agak canggih dalam javascript, jadi ini akan lebih panjang. Kami akan mulai dari atas. Sabuk pengaman!
1. Mengapa tidak adil Array(5).map?
Apa itu array, sungguh? Objek reguler, berisi kunci integer, yang memetakan ke nilai. Ini memiliki fitur-fitur khusus lainnya, misalnya lengthvariabel magis , tetapi pada intinya, ini adalah key => valuepeta biasa , sama seperti objek lainnya. Mari kita bermain dengan array sedikit, oke?
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']
Kita sampai pada perbedaan inheren antara jumlah item dalam array arr.length,, dan jumlah key=>valuepemetaan yang dimiliki array, yang bisa berbeda dari arr.length.
Memperluas array via arr.length tidak membuat key=>valuepemetaan baru , jadi bukan karena array memiliki nilai yang tidak ditentukan, array tidak memiliki kunci-kunci ini . Dan apa yang terjadi ketika Anda mencoba mengakses properti yang tidak ada? Anda mendapatkanundefined .
Sekarang kita bisa sedikit mengangkat kepala kita, dan melihat mengapa fungsi seperti arr.maptidak berjalan di atas properti ini. Jika arr[3]hanya tidak terdefinisi, dan kuncinya ada, semua fungsi array ini hanya akan pergi seperti nilai lainnya:
//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"]
Saya sengaja menggunakan pemanggilan metode untuk membuktikan lebih lanjut bahwa kunci itu sendiri tidak pernah ada: Memanggil undefined.toUpperCaseakan menimbulkan kesalahan, tetapi ternyata tidak. Untuk membuktikan itu :
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
Dan sekarang kita sampai pada poin saya: Bagaimana Array(N)melakukan sesuatu. Bagian 15.4.2.2 menjelaskan prosesnya. Ada banyak omong kosong yang tidak kita pedulikan, tetapi jika Anda berhasil membaca yang tersirat (atau Anda bisa mempercayai saya tentang hal ini, tetapi tidak), pada dasarnya bermuara pada ini:
function Array(len) {
var ret = [];
ret.length = len;
return ret;
}
(beroperasi berdasarkan asumsi (yang diperiksa dalam spesifikasi aktual) yang lenmerupakan uint32 yang valid, dan bukan sembarang jumlah nilai)
Jadi sekarang Anda dapat melihat mengapa melakukan Array(5).map(...)tidak akan berhasil - kami tidak mendefinisikan lenitem pada array, kami tidak membuat key => valuepemetaan, kami hanya mengubah lengthproperti.
Sekarang kita memiliki hal itu, mari kita lihat hal ajaib kedua:
2. Bagaimana cara Function.prototype.applykerjanya
Apa yang applydilakukan pada dasarnya adalah mengambil sebuah array, dan membuka gulungannya sebagai argumen pemanggilan fungsi. Itu berarti bahwa yang berikut hampir sama:
function foo (a, b, c) {
return a + b + c;
}
foo(0, 1, 2); //3
foo.apply(null, [0, 1, 2]); //3
Sekarang, kita dapat mempermudah proses melihat cara applykerjanya dengan hanya mencatat argumentsvariabel khusus:
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]
Mudah untuk membuktikan klaim saya dalam contoh kedua hingga terakhir:
function ahaExclamationMark () {
console.log(arguments.length);
console.log(arguments.hasOwnProperty(0));
}
ahaExclamationMark.apply(null, Array(2)); //2, true
(Ya, pun intended). The key => valuepemetaan mungkin tidak ada dalam array kami melewati ke apply, tapi jelas ada dalam argumentsvariabel. Ini adalah alasan yang sama dengan contoh terakhir yang berfungsi: Kunci tidak ada pada objek yang kita lewati, tetapi mereka ada di arguments.
Mengapa demikian? Mari kita lihat Bagian 15.3.4.3 , di mana Function.prototype.applydidefinisikan. Sebagian besar hal yang tidak kita pedulikan, tapi inilah bagian yang menarik:
- Mari kita menjadi hasil memanggil metode internal [[Get]] argArray dengan argumen "length".
Yang pada dasarnya berarti: argArray.length. Spec kemudian melanjutkan untuk melakukan forloop sederhana ke lengthitem, membuat listnilai yang sesuai ( listadalah beberapa voodoo internal, tetapi pada dasarnya merupakan array). Dalam hal kode yang sangat, sangat longgar:
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);
};
Jadi yang kita butuhkan untuk meniru argArraydalam hal ini adalah objek dengan lengthproperti. Dan sekarang kita bisa melihat mengapa nilainya tidak terdefinisi, tetapi kuncinya tidak, pada arguments: Kami membuat key=>valuepemetaan.
Fiuh, jadi ini mungkin tidak lebih pendek dari bagian sebelumnya. Tapi akan ada kue saat kita selesai, jadi bersabarlah! Namun, setelah bagian berikut (yang akan singkat, saya berjanji) kita dapat mulai membedah ekspresi. Jika Anda lupa, pertanyaannya adalah bagaimana cara kerja berikut ini:
Array.apply(null, { length: 5 }).map(Number.call, Number);
3. Bagaimana Arraymenangani beberapa argumen
Begitu! Kami melihat apa yang terjadi ketika Anda menyampaikan lengthargumen Array, tetapi dalam ekspresi, kami menyampaikan beberapa hal sebagai argumen ( undefinedtepatnya array 5 ). Bagian 15.4.2.1 memberi tahu kita apa yang harus dilakukan. Paragraf terakhir adalah yang terpenting bagi kami, dan itu bernada benar-benar aneh, tapi itu jenis bermuara:
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! Kami mendapatkan array dari beberapa nilai yang tidak ditentukan, dan kami mengembalikan array dari nilai-nilai yang tidak terdefinisi ini.
Bagian pertama dari ekspresi
Akhirnya, kita dapat menguraikan hal-hal berikut:
Array.apply(null, { length: 5 })
Kami melihat bahwa ia mengembalikan array yang berisi 5 nilai yang tidak ditentukan, dengan kunci-kunci yang semuanya ada.
Sekarang, ke bagian kedua dari ungkapan:
[undefined, undefined, undefined, undefined, undefined].map(Number.call, Number)
Ini akan menjadi bagian yang lebih mudah dan tidak berbelit-belit, karena tidak terlalu bergantung pada peretasan yang tidak jelas.
4. Bagaimana Numbermemperlakukan input
Melakukan Number(something)( bagian 15.7.1 ) dikonversi somethingke angka, dan itu saja. Cara melakukannya agak berbelit-belit, terutama dalam kasus string, tetapi operasi didefinisikan pada bagian 9.3 jika Anda tertarik.
5. Game dari Function.prototype.call
calladalah applysaudara laki-laki, didefinisikan dalam bagian 15.3.4.4 . Alih-alih mengambil array argumen, itu hanya mengambil argumen yang diterima, dan meneruskannya.
Hal-hal menjadi menarik ketika Anda rantai lebih dari satu callbersama-sama, engkol aneh hingga 11:
function log () {
console.log(this, arguments);
}
log.call.call(log, {a:4}, {a:5});
//{a:4}, [{a:5}]
//^---^ ^-----^
// this arguments
Ini cukup layak sampai Anda memahami apa yang sedang terjadi. log.callhanya fungsi, setara dengan callmetode fungsi lain , dan karenanya, memiliki callmetode sendiri:
log.call === log.call.call; //true
log.call === Function.call; //true
Dan apa fungsinya call? Ia menerima a thisArgdan banyak argumen, dan memanggil fungsi induknya. Kita dapat mendefinisikannya melalui apply (sekali lagi, kode yang sangat longgar, tidak akan berfungsi):
Function.prototype.call = function (thisArg) {
var args = arguments.slice(1); //I wish that'd work
return this.apply(thisArg, args);
};
Mari kita lacak bagaimana ini turun:
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}])
Bagian selanjutnya, atau bagian .mapdari itu semua
Ini belum selesai. Mari kita lihat apa yang terjadi ketika Anda menyediakan fungsi ke sebagian besar metode array:
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
Jika kami sendiri tidak memberikan thisargumen, defaultnya adalah window. Catat urutan argumen yang disediakan untuk panggilan balik kami, dan mari kita ulangi sampai ke 11 lagi:
arr.forEach(log.call, log);
//'a', [0, ['a', 'b', 'c']]
//'b', [1, ['a', 'b', 'c']]
//'b', [2, ['a', 'b', 'c']]
// ^ ^
Whoa whoa whoa ... mari kita mundur sedikit. Apa yang terjadi di sini? Kita dapat melihat di bagian 15.4.4.18 , di mana forEachdidefinisikan, berikut ini cukup banyak terjadi:
var callback = log.call,
thisArg = log;
for (var i = 0; i < arr.length; i += 1) {
callback.call(thisArg, arr[i], i, arr);
}
Jadi, kami mendapatkan ini:
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);
Sekarang kita bisa melihat cara .map(Number.call, Number)kerjanya:
Number.call.call(Number, arr[i], i, arr);
Number.call(arr[i], i, arr);
Number(i, arr);
Yang mengembalikan transformasi i, indeks saat ini, ke angka.
Kesimpulannya,
Ekspresi
Array.apply(null, { length: 5 }).map(Number.call, Number);
Bekerja dalam dua bagian:
var arr = Array.apply(null, { length: 5 }); //1
arr.map(Number.call, Number); //2
Bagian pertama menciptakan array 5 item yang tidak ditentukan. Yang kedua melewati array itu dan mengambil indeksnya, menghasilkan sebuah array indeks elemen:
[0, 1, 2, 3, 4]
Array.apply(null, Array(30)).map(Number.call, Number)lebih mudah dibaca karena menghindari pura-pura bahwa objek biasa adalah Array.