Kısacası
özet
En basit haliyle, bu teknik kodu bir fonksiyon kapsamı içine sarmayı amaçlamaktadır .
Şansını azaltmaya yardımcı olur:
- diğer uygulamalarla / kütüphanelerle çakışma
- üstün (küresel olasılıkla) kapsamı kirleten
O değil belge hazır olduğunda algılamak - bu çeşit değildir document.onload, ne dewindow.onload
Genellikle bir Immediately Invoked Function Expression (IIFE)veya olarak bilinir Self Executing Anonymous Function.
Kod Açıklaması
var someFunction = function(){ console.log('wagwan!'); };
(function() { /* function scope starts here */
console.log('start of IIFE');
var myNumber = 4; /* number variable declaration */
var myFunction = function(){ /* function variable declaration */
console.log('formidable!');
};
var myObject = { /* object variable declaration */
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
})(); /* function scope ends */
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
Yukarıdaki örnekte, işlevde tanımlanan herhangi bir değişken (yani kullanılarak bildirildi var) "özel" olacak ve SADECE (Vivin Paliath'in belirttiği gibi) işlev kapsamı içinde erişilebilir olacaktır. Başka bir deyişle, bu değişkenler fonksiyonun dışında görünmez / ulaşılamaz. Canlı demoya bakın .
Javascript fonksiyon kapsam belirleme özelliğine sahiptir. Msgstr "Bir fonksiyonda tanımlanan parametreler ve değişkenler fonksiyonun dışında görünmez ve fonksiyon içinde herhangi bir yerde tanımlanan bir değişken fonksiyonun her yerinde görülebilir." ("Javascript: İyi Parçalar" dan).
Daha fazla detay
Alternatif Kod
Sonunda, daha önce yayınlanan kod aşağıdaki gibi de yapılabilir:
var someFunction = function(){ console.log('wagwan!'); };
var myMainFunction = function() {
console.log('start of IIFE');
var myNumber = 4;
var myFunction = function(){ console.log('formidable!'); };
var myObject = {
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
};
myMainFunction(); // I CALL "myMainFunction" FUNCTION HERE
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
Canlı demoya bakın .
Kökleri
Yineleme 1
Bir gün biri muhtemelen "myMainFunction" isminden kaçınmanın bir yolu olmalı, çünkü istediğimiz tek şey onu hemen uygulamaktır. "
Temel bilgilere geri dönerseniz, şunu öğrenirsiniz:
expression: bir değeri değerlendiren bir şey. yani3+11/xstatement: Satır bir şey yapıyor kodunun (s) AMA yok değil bir değere değerlendirir. yaniif(){}
Benzer şekilde, fonksiyon ifadeleri bir değer olarak değerlendirilir. Ve bir sonuç (sanırım?) Derhal çağrılabilirler:
var italianSayinSomething = function(){ console.log('mamamia!'); }();
Böylece daha karmaşık örneğimiz şöyle olur:
var someFunction = function(){ console.log('wagwan!'); };
var myMainFunction = function() {
console.log('start of IIFE');
var myNumber = 4;
var myFunction = function(){ console.log('formidable!'); };
var myObject = {
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
}();
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
Canlı demoya bakın .
Yineleme 2
Bir sonraki adım "neden var myMainFunction =kullanmasak bile!"
Cevap basit: aşağıdaki gibi bunu kaldırmayı deneyin:
function(){ console.log('mamamia!'); }();
Canlı demoya bakın .
Çünkü işe yaramaz "fonksiyonu bildirimleri Invokable değiliz" .
Hüner kaldırarak olmasıdır var myMainFunction =biz dönüştürülmüş işlev ifadesi bir içine işlev bildiriminde . Bununla ilgili daha fazla ayrıntı için "Kaynaklar" daki bağlantılara bakın.
Sonraki soru şudur: "Bunu neden başka bir şeyle bir işlev ifadesi olarak tutamıyorum var myMainFunction =?
Cevap "yapabilirsin" ve aslında bunu yapmanın pek çok yolu var: a +, a !, a -veya belki de bir çift parantez (şimdi konvansiyon tarafından yapıldığı gibi) eklenmesi ve daha fazlasına inanıyorum. Örnek olarak:
(function(){ console.log('mamamia!'); })(); // live demo: jsbin.com/zokuwodoco/1/edit?js,console.
veya
+function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wuwipiyazi/1/edit?js,console
veya
-function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wejupaheva/1/edit?js,console
Bu nedenle, bir zamanlar "Alternatif Kodumuza" ilgili değişiklik eklendikten sonra, "Kod Açıklaması" örneğinde kullanılanla aynı koda dönüyoruz.
var someFunction = function(){ console.log('wagwan!'); };
(function() {
console.log('start of IIFE');
var myNumber = 4;
var myFunction = function(){ console.log('formidable!'); };
var myObject = {
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
})();
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
Hakkında daha fazla bilgi Expressions vs Statements:
Kapsamları Belirleme
Merak edebileceğiniz bir şey, "fonksiyonun içinde 'düzgün' değişkeni TANIMLAMADIĞINIZDA ne olur - yani bunun yerine basit bir atama yapın?"
(function() {
var myNumber = 4; /* number variable declaration */
var myFunction = function(){ /* function variable declaration */
console.log('formidable!');
};
var myObject = { /* object variable declaration */
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
myOtherFunction = function(){ /* oops, an assignment instead of a declaration */
console.log('haha. got ya!');
};
})();
myOtherFunction(); // reachable, hence works: see in the console
window.myOtherFunction(); // works in the browser, myOtherFunction is then in the global scope
myFunction(); // unreachable, will throw an error, see in the console
Canlı demoya bakın .
Temel olarak, geçerli kapsamı içinde bildirilmeyen bir değişkene bir değer atanırsa, "değişkeni bulana veya global kapsama (hangi noktada oluşturacağı) ulaşıncaya kadar kapsam zincirine bakın".
Bir tarayıcı ortamında (düğümler gibi bir sunucu ortamına karşı) global kapsam windownesne tarafından tanımlanır . Böylece yapabiliriz window.myOtherFunction().
Bu konuyla ilgili "İyi uygulamalar" ipucum, her varzaman bir şey tanımlarken kullanmaktır : ister sayı, ister nesne veya işlev, ister global kapsamda olsa bile. Bu, kodu çok daha basit hale getirir.
Not:
- javascript yok değil var
block scope(: eklenen blok kapsamı yerel değişkenler Güncelleme ES6 .)
- javascript'te yalnızca
function scope& vardır global scope(( windowtarayıcı ortamında kapsam)
Hakkında daha fazla bilgi Javascript Scopes:
kaynaklar
Sonraki adımlar
Bu IIFEkavramı elde ettikten sonra module pattern, genellikle bu IIFE modelini kullanarak yapılır. İyi eğlenceler :)