你還在使用JavaScript IIFE？可以停手了技术頭條網

你還在使用JavaScript IIFE？可以停手了

2020-04-13 16:57:00 讀芯術

全文共1325字，預計學習時長6分鐘

圖源：unsplash

JavaScript語言中，IIFE代表立即調用函數表達式，它是一個定義後即刻執行的函數。

為什麼我說別再在代碼中編寫IIFE了？本文將給你答案。

可以在JavaScript中定義Block-Scoped 變量

以ES6作為標準發佈，你可以使用let和const聲明塊級作用域的變量和常量。它還引入了獨立塊，可以將變量和常量隔離到外部無法使用的自身塊中。

例如，可以寫:

<code>{ let x = 1;}/<code>

那麼x對外不可用。

這要比以下代碼清晰許多：

<code>(()=>{
  let x = 1;
})();/<code>

現如今，幾乎所有瀏覽器都支持ES6，停止使用IIFE能將變量從外部分離。

另一種隔離變量的方法是使用模塊，它也得到廣泛支持。只要不將其導出，其他模塊就無法使用。

不再需要閉包

閉包是返回另一個函數的函數。返回的函數能夠運行在其外部的代碼，但內部的代碼則由閉包函數運行。

例如，它可能會產生:

<code>const id = (() => {
  let count = 0;
  return () => {
    ++count;
    return `id_${count}`;
  };
})();/<code>

而既有了塊和模塊以隔離數據，上述函數就變得更加複雜和不必要了。

可以將所有函數放入其自身模塊，這樣就不必擔心暴露數據了，但這也會產生副作用。由於不是純函數，很難對其進行測試。

在可以避免嵌套的時候，返回函數的函數也會引入嵌套，所以它比沒有返回函數的函數更易混淆。用模塊代替是最好的方法。使用模塊可以編寫:

<code>let count = 0;export const id =() => {
  ++this.count;
  return `id_${count}`
}/<code>

上面代碼中，有相同的count聲明且導出了id函數，以供其他模塊使用。這像IIFE一樣，隱藏了count並暴露出我們想要的函數，但是嵌套較少，不需要定義另一個函數來運行它。

別名變量

同樣，寫如下內容:

<code>window.$ = function foo() {
  // ...
};(function($) {
  // ...
})(jQuery);/<code>

使用模塊就可以編寫，為何還要僅為給變量創建別名而編寫IIFE？利用模塊，可以導入不同名稱的內容。

你可以這樣為變量創建別名的編寫方式:

<code>import { $ as jQuery } from"jquery";const $ = () => {};/<code>

此外，不要給窗口對象添加新屬性，這會影響全局作用域。

圖源：unsplash

捕捉全局對象

使用globalThis，就不必擔心不同作用域中全局對象的名稱問題，它正在成為一種標準。無需再使用IIFE以捕獲全局對象，你可以在區域頂級編寫如下內容:

<code>(function(global) {
  // ...
})(this);/<code>

甚至即使在“globalThis”之前，編寫如下內容設置全局對象也不太難:

<code>const globalObj = self || window|| global;/<code>

或者如果想更精確，可以寫:

<code>const getGlobal = () => {
  if (typeof self !== 'undefined') {return self; } 

  if (typeof window !== 'undefined') {return window; }
  if (typeof global !== 'undefined') {return global; }
  throw new Error('unable to locateglobal object');
};/<code>

不必通過IIFE添加額外函數調用和引入嵌套。