JS系列(五):函數(shù)作用域

和其它語(yǔ)言一樣,函數(shù)或者說(shuō)方法,都有自己的作用域。通過(guò)不同的代碼塊管理,來(lái)實(shí)現(xiàn)變量、函數(shù)、功能等隱藏,最終目標(biāo):高聚斂、低耦合

var a = 1;
function foo() {
    var a = 2;
    console.log(a); // 2
}
foo();
console.log(a); // 1

我們通過(guò)foo函數(shù),將內(nèi)部變量隱藏起來(lái),看似很好,但是我們確污染了全局對(duì)象,因?yàn)閒oo方法被加入到全局對(duì)象中,而且我們還需要多寫(xiě)一行代碼foo()來(lái)主動(dòng)執(zhí)行;

那有沒(méi)有不污染全局對(duì)象,又能直接執(zhí)行的方式呢?
當(dāng)然有咯,而且這種方式還有個(gè)名稱:IIFE(Immediately Invoked Function Expression)【立即執(zhí)行函數(shù)表達(dá)式】

 var a = 1;
 (function foo(){
     var a = 2;
     console.log(a); // 2
 })();
 console.log(a); // 1
 console.log(window.foo) // undefined

IIFE這種方式滿足了我們所有的需求。這就是早期jQuery的實(shí)現(xiàn)方式?。?!第一個(gè)()所包裹的是一個(gè)函數(shù)表達(dá)式,因此,我們?cè)诤竺嫣砑永ㄌ?hào)也就是 第二個(gè)()時(shí),該函數(shù)表達(dá)式就立即執(zhí)行了。

上面的IIFE函數(shù)名可以省略(function (){...})();但是,好的做法是給定一個(gè)函數(shù)名。另外,我們也可以給IIFE傳遞參數(shù):

 var a = 1;
 (function foo(global){
     var a = 2;
     console.log(a, global.a); // 2 1
 })(window);
 console.log(a); // 1

另外,IIFE也可以避免一些問(wèn)題:

 var undefined = true; // 大坑!
 (function foo(undefined){
     var a;
     if (a === undefined) {
         console.log("undefined is safe here");
     }
 })();

還有一種寫(xiě)法,目前也是被廣泛使用的,UMD(Universal Module Definition)

(function IIFE(def) { 
    def(window);
})(function def(global) {
    var a = 3;
    console.log(a, global.a); // 3 2
});

函數(shù)表達(dá)式def定義在片段的第二部分,然后當(dāng)作參數(shù)(這個(gè)參數(shù)也叫作 def)被傳遞進(jìn) IIFE 函數(shù)定義的第一部分中。最后,參數(shù) def(也就是傳遞進(jìn)去的函數(shù))被調(diào)用,并將window傳入當(dāng)作global參數(shù)的值。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容