Bu "hack" i anlamak, birkaç şeyi anlamayı gerektirir:
- Neden sadece yapmıyoruz
Array(5).map(...)
Function.prototype.applyArgümanları nasıl işlerArrayBirden çok argümanı nasıl işler?Numberİşlev bağımsız değişkenleri nasıl işler?- Ne
Function.prototype.callyapar
Bunlar javascript'te oldukça ileri düzey konulardır, bu yüzden bu çok uzun olacaktır. En baştan başlayacağız. Kemer bağlamak!
1. Neden sadece değil Array(5).map?
Dizi nedir gerçekten? Değerlerle eşleşen tamsayı anahtarları içeren normal bir nesne. Büyülü lengthdeğişken gibi başka özellikleri de vardır , ancak özünde key => valuediğer nesneler gibi normal bir haritadır. Biraz dizilerle oynayalım, olur mu?
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']
Dizideki öğe arr.lengthsayısı ile key=>valuedizinin sahip olduğu eşleme sayısı arasındaki , bundan farklı olabilen doğal farka ulaşıyoruz arr.length.
Aracılığıyla diziyi Genişleyen arr.length vermez herhangi bir yeni oluşturmak key=>valueo dizi tanımsız değerlere sahip olduğunu değil yani, eşleştirmeleri, bu bu anahtarları yok . Var olmayan bir mülke erişmeye çalıştığınızda ne olur? Sen alırsın undefined.
Şimdi başımızı biraz kaldırabilir ve neden arr.mapbu özelliklerin üzerinden geçemeyen işlevlerin olduğunu görebiliriz . arr[3]Yalnızca tanımsız olsaydı ve anahtar varsa, tüm bu dizi işlevleri, diğer herhangi bir değer gibi onun üzerinden geçerdi:
//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"]
Anahtarın kendisinin asla orada olmadığını kanıtlamak için kasıtlı olarak bir yöntem çağrısı kullandım: Çağrı undefined.toUpperCaseyapmak bir hatayı ortaya çıkarırdı, ancak olmadı. Bunu kanıtlamak için :
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
Ve şimdi benim noktama geliyoruz: Array(N)İşler nasıl gidiyor? Bölüm 15.4.2.2 süreci açıklamaktadır. Umursamadığımız bir sürü saçma jumbo var, ancak satır aralarını okumayı başarırsanız (ya da bu konuda bana güvenebilirsiniz, ama güvenmeyin), temelde şuna indirgenir:
function Array(len) {
var ret = [];
ret.length = len;
return ret;
}
( lenherhangi bir değer sayısı değil, geçerli bir uint32 olan varsayım (gerçek spesifikasyonda kontrol edilir) altında çalışır )
Şimdi yapmanın neden Array(5).map(...)işe yaramayacağını anlayabilirsiniz - lendizideki öğeleri tanımlamıyoruz , key => valueeşlemeleri oluşturmuyoruz, sadece lengthözelliği değiştiriyoruz .
Artık bunu yoldan çıkardığımıza göre, ikinci büyülü şeye bakalım:
2. Nasıl Function.prototype.applyçalışır
Ne applyyapar temelde bir dizi almak ve bir işlev çağrısının argüman olarak önüne sermek olduğunu. Bu, aşağıdakilerin hemen hemen aynı olduğu anlamına gelir:
function foo (a, b, c) {
return a + b + c;
}
foo(0, 1, 2); //3
foo.apply(null, [0, 1, 2]); //3
Şimdi, applysadece argumentsözel değişkeni günlüğe kaydederek nasıl çalıştığını görme sürecini kolaylaştırabiliriz :
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]
İddiamı sondan ikinci örnekte kanıtlamak kolaydır:
function ahaExclamationMark () {
console.log(arguments.length);
console.log(arguments.hasOwnProperty(0));
}
ahaExclamationMark.apply(null, Array(2)); //2, true
(evet, kelime oyunu). key => valueHaritalama biz geçti dizide var olmayabilir apply, ama kesinlikle var argumentsdeğişken. Bu, son örneğin çalışmasının nedeni ile aynıdır: Anahtarlar, geçtiğimiz nesnede yoktur, ancak içinde bulunurlar arguments.
Neden? En atalım Bölüm 15.3.4.3 , Function.prototype.applytanımlanır. Çoğunlukla umursamadığımız şeyler, ama işte ilginç kısım:
- Len, argArray'in [[Get]] dahili yöntemini "length" bağımsız değişkeniyle çağırmanın sonucu olsun.
Hangi temelde şu anlama gelir: argArray.length. Spesifikasyon daha sonra öğeler forüzerinde basit bir döngü oluşturarak karşılık gelen değerlerden bir tane oluşturur ( bazı dahili vudu, ancak temelde bir dizidir). Çok, çok gevşek kod açısından:lengthlistlist
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);
};
Bu durumda tek yapmamız gereken argArraybir lengthözelliği olan bir nesnedir . Ve şimdi değerlerin neden tanımsız olduğunu görebiliriz, ancak anahtarlar değil arguments: key=>valueEşlemeleri biz oluşturuyoruz .
Vay canına, bu yüzden bu önceki bölümden daha kısa olmayabilir. Ama bitirdiğimizde pasta olacak, bu yüzden sabırlı olun! Ancak, sonraki bölümden sonra (kısa olacak, söz veriyorum) ifadeyi incelemeye başlayabiliriz. Unutmanız durumunda, soru aşağıdakilerin nasıl çalıştığıdır:
Array.apply(null, { length: 5 }).map(Number.call, Number);
3. ArrayBirden çok argümanı nasıl işler?
Yani! Bir lengthargüman ilettiğinizde ne olduğunu gördük Array, ancak ifadede, argüman olarak birkaç şey iletiyoruz ( undefinedtam olarak 5'li bir dizi ). Bölüm 15.4.2.1 bize ne yapacağımızı anlatır. Son paragraf bizim için önemli olan tek şeydir ve gerçekten tuhaf bir şekilde ifade edilmiştir , ancak biraz aşağıya iner:
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! Birkaç tanımsız değer dizisi elde ederiz ve bu tanımsız değerlerin bir dizisini döndürürüz.
İfadenin ilk kısmı
Son olarak, aşağıdakileri deşifre edebiliriz:
Array.apply(null, { length: 5 })
5 tanımsız değer içeren bir dizi döndürdüğünü gördük, anahtarların tümü var.
Şimdi, ifadenin ikinci kısmına:
[undefined, undefined, undefined, undefined, undefined].map(Number.call, Number)
Bu daha kolay, kıvrılmamış kısım olacak çünkü belirsiz bilgisayar korsanlarına pek güvenmiyor.
4. NumberGirdiye nasıl davranılır
Yapmak Number(something)( bölüm 15.7.1 ) somethingbir sayıya dönüşür ve hepsi bu kadar. Bunu nasıl yapar, özellikle dizeler söz konusu olduğunda biraz kıvrımlıdır, ancak ilgilenmeniz durumunda işlem bölüm 9.3'te tanımlanmıştır .
5. Oyunlar Function.prototype.call
call, bölüm 15.3.4.4'teapply tanımlanan erkek kardeşidir . Bir dizi argüman almak yerine, sadece aldığı argümanları alır ve onları iletir.
Birden fazla zincir oluşturduğunuzda işler ilginçleşir call, tuhaf olanı 11'e kadar yükseltin:
function log () {
console.log(this, arguments);
}
log.call.call(log, {a:4}, {a:5});
//{a:4}, [{a:5}]
//^---^ ^-----^
// this arguments
Neler olup bittiğini anlayana kadar bu oldukça değerlidir. log.callsadece bir işlevdir, başka herhangi bir işlevin callyöntemine eşdeğerdir ve bu nedenle callkendi üzerinde de bir yöntemi vardır :
log.call === log.call.call; //true
log.call === Function.call; //true
Ve ne yapar call? Bir thisArgve bir dizi argümanı kabul eder ve ana işlevini çağırır. Bunu şu şekilde tanımlayabiliriz apply (yine, çok gevşek kod, çalışmaz):
Function.prototype.call = function (thisArg) {
var args = arguments.slice(1); //I wish that'd work
return this.apply(thisArg, args);
};
Bunun nasıl azaldığını izleyelim:
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}])
Daha sonraki kısım veya .maphepsinin
Daha bitmedi. Çoğu dizi yöntemine bir işlev sağladığınızda ne olacağını görelim:
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
thisKendimiz bir argüman sunmazsak, varsayılan olur window. Geri aramamıza verilen argümanların sırasına dikkat edin ve bunu tekrar 11'e kadar tuhaf hale getirelim:
arr.forEach(log.call, log);
//'a', [0, ['a', 'b', 'c']]
//'b', [1, ['a', 'b', 'c']]
//'b', [2, ['a', 'b', 'c']]
// ^ ^
Whoa whoa whoa ... hadi biraz geri dönelim. Burada neler oluyor? Biz de görebileceğiniz bölüm 15.4.4.18 , forEachtanımlanır, şu hoş çok olur:
var callback = log.call,
thisArg = log;
for (var i = 0; i < arr.length; i += 1) {
callback.call(thisArg, arr[i], i, arr);
}
Yani, şunu anlıyoruz:
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);
Şimdi nasıl .map(Number.call, Number)çalıştığını görebiliriz :
Number.call.call(Number, arr[i], i, arr);
Number.call(arr[i], i, arr);
Number(i, arr);
Bu i, geçerli dizinin dönüşümünü bir sayıya döndürür .
Sonuç olarak,
İfade
Array.apply(null, { length: 5 }).map(Number.call, Number);
İki kısımda çalışır:
var arr = Array.apply(null, { length: 5 }); //1
arr.map(Number.call, Number); //2
İlk bölüm 5 tanımsız öğe dizisi oluşturur. İkincisi bu dizinin üzerinden geçer ve dizinlerini alarak bir dizi öğe dizini ile sonuçlanır:
[0, 1, 2, 3, 4]
Array.apply(null, Array(30)).map(Number.call, Number)okunması daha kolaydır çünkü düz bir nesnenin bir Dizi gibi görünmesini önler.