js中l(wèi)et能完全替代IIFE嗎

這篇文章主要介紹了js中l(wèi)et能完全替代IIFE嗎，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

函數(shù)作用域 VS 塊級作用域

通過var關(guān)鍵字聲明的本地變量僅作用于當(dāng)前閉包域，如果不存在這樣的一個(gè)閉包函數(shù)，那么將會創(chuàng)建一個(gè)污染全局作用域的全局變量。為了防止這種情況出現(xiàn)，我們可以使用IIFE來創(chuàng)建一個(gè)包含有這個(gè)本地變量的函數(shù)。

(function(){
varfoo= "bar";
console.log(foo);
})();
foo;// ReferenceError: foo is not defined

目前的爭論是，我們可以使用在ECMA 2015介紹的塊級作用域變量來代替IIFE，以達(dá)到相同的效果。相比于函數(shù)級作用域，let和const關(guān)鍵字聲明的本地變量僅作用于當(dāng)前所處的”塊”級域。

{
let foo= "bar";
console.log(foo);
}
foo;// ReferenceError: foo is not defined

然而，塊級作用域變量不是立即函數(shù)執(zhí)行表達(dá)式的替代品。確實(shí)，如果支持ECMA 2015，let和const能夠用來限制本地變量只在包含它的塊級作用域內(nèi)使用。

如果，你在不支持ECMA 2015的環(huán)境(例如一些舊的瀏覽器)中執(zhí)行你的Java代碼。你就不能使用let和const關(guān)鍵字來創(chuàng)建塊級作用域變量。你將不得不求助于以前經(jīng)典的函數(shù)級作用域方法。

閉包和私有數(shù)據(jù)

IIFE的另一個(gè)用法是為局部變量提供一個(gè)封裝的作用域，在IIFE返回的函數(shù)中能夠訪問該變量。這種方式即_a closure is created_允許函數(shù)訪問這個(gè)本地變量,即使這個(gè)函數(shù)在IIFE的詞法范圍之外執(zhí)行時(shí)。

假設(shè)我們要創(chuàng)建一個(gè)uniqueId函數(shù)，每次調(diào)用該函數(shù)時(shí)就會返回一個(gè)唯一的id（比如 “id_1”，“id_2”等）。在下面的IIFE中，記錄了一個(gè)私有的計(jì)數(shù)變量（count)，每次調(diào)用計(jì)數(shù)函數(shù)uniqueId的時(shí)候，就會將count加一。我們在IIFE中返回的另一個(gè)函數(shù)，這個(gè)函數(shù)在調(diào)用時(shí)會返回一個(gè)新的標(biāo)識符字符串。

constuniqueId= (function(){
let count= 0;
returnfunction(){
++count;
returnid_${count};
};
})();
console.log(uniqueId());// "id_1"
console.log(uniqueId());// "id_2"
console.log(uniqueId());// "id_3"

注意，在IIEF之外無法訪問這個(gè)計(jì)數(shù)變量count。除了從IIEF中返回的函數(shù)，別人無法讀寫該變量。這樣就能創(chuàng)建真正的私有狀態(tài)，它只能以受控的方式進(jìn)行修改。revealing module pattern非常依賴于這種機(jī)制。

constcounter= (function(){
let counterValue= 0;
return{
increment(){
++counterValue;
},
get value(){
returncounterValue;
}
};
})();
counter.increment();
console.log(counter.value);// 1
counter.increment();
counter.increment();
console.log(counter.value);// 3

當(dāng)使用IIFE來返回一個(gè)”封閉”一些本地變量來管理私有數(shù)據(jù)的函數(shù)時(shí)，let和const都不能替代它。

變量重命名

有時(shí)，你可能碰到一種情況，你正在使用的兩個(gè)不同的庫暴露的全局變量名是相同的。例如，考慮一下你正在使用jQuery同時(shí)另一個(gè)庫也指定了一個(gè)為$的全局變量。

為了解決命名沖突問題，可以將一段代碼封裝在一個(gè)IIEF中，將一個(gè)全局變量（比如，jQuery）作為參數(shù)傳入IIFE。在函數(shù)內(nèi)部，就可以以一個(gè)任意的參數(shù)名（比如，$）來訪問該參數(shù)值：

window.$= functionsomethingElse(){
// ...
};
(function($){
// ...
})(jQuery);

不管在外部作用域有什么值指定給$，在IIFE中，這些值都會被”屏蔽”，$參數(shù)一直指向jQuery方法。

捕獲全局對象

Java代碼在不同環(huán)境執(zhí)行時(shí)，你所使用的全局對象是不同的。當(dāng)代碼在瀏覽器運(yùn)行時(shí)，全局對象是windows。但是在Node.js中，全局對象是global。由于在寫通用的Java代碼時(shí)，你肯定不想硬編碼這兩個(gè)名字其中的任何一個(gè)，這時(shí)你就可以使用一種”包裝”的方式就像下面這樣：

(function(global){
// ...
})(this);

不管是瀏覽器還是Node.js的環(huán)境，global參數(shù)將會指定到對的全局對象上。如果想了解更多關(guān)于使用這種技巧來捕獲全局對象的細(xì)節(jié)內(nèi)容，請移步this post by Todd Motto。

壓縮方面的優(yōu)化

混疊變量名的方法也可以用來優(yōu)化代碼，這種方式使代碼能夠被更有效的壓縮。舉例如下：

(function(window,document,undefined){
// ...
})(window,document);

更短標(biāo)識符名會使文件的體積變得更小。然而，如果HTTP的返回內(nèi)容通過Gzip或者Deflate進(jìn)行壓縮，文件的大小已經(jīng)被很有效的壓縮了。因此，如果結(jié)合壓縮算法，壓縮技術(shù)的邊際收益會變得更小。所以自己權(quán)衡和比較返回內(nèi)容的大小，較短的名字可能仍然是有作用的。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“js中l(wèi)et能完全替代IIFE嗎”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!