(譯文)12個簡單(但強大)的JavaScript技巧(二)

原文連接: 12 Simple (Yet Powerful) JavaScript Tips

其餘連接: (譯文)12個簡單(但強大)的JavaScript技巧(一)

強大的當即調用函數表達式

(什麼是當即調用函數表達式, 什麼時候使用它)

IIFE (Immediately Invoked Function Expressions, 發音:「Iffy」)是當即調用函數表達式的縮寫形式, 它的語法大概以下:

(function() {
  //Do fun stuff
})()

這是一個當即調用的匿名函數, 它在JavaScript中有一些特別重要的做用.

它是如何工做的?

• 包圍匿名函數的一對括號會把它變成函數表達式或者變量表達式.

• 這就至關於:

  //不帶括號:
  ? = function() {};
  
  //帶括號:
  (? = function() {});
  //函數被一個不知名的變量引用了, 一對括號把它包圍了, 把它變成了一個匿名的函數表達式

  一樣的, 咱們甚至能夠建立一個命名的當即調用函數表達式:

  (showName = function(name) {
    console.log( name || "No Name");
  })();   //No Name
  
  showName("Rich");   //Rich
  showName();     //NoName

• 記住, 當你不用var關鍵詞建立變量的時候, JavaScript會自動判斷該變量爲全局變量. 在上面的例子中是沒有必要使用var關鍵詞的(由於你以後可能會調用它).
• 咱們能夠立刻或者在這以後使用這個函數

• 可是咱們不能夠在以後調用匿名函數. 由於除非你建立匿名函數以後立刻調用, 在這以後沒有其餘辦法能夠引用它. 這是匿名函數只能夠立刻調用它的緣由.

  ---

• 當把匿名函數包含在一對括號裏面時(字面量), 整個字面量會被運算,而且返回匿名函數的返回值. 它的返回值實質上是整個匿名函數自身, 因此咱們只須要在這以後加上一對括號來立刻調用它.
• 所以, 後面的一對括號等於告訴JavaScript編譯器立刻調用這個匿名函數, 因此它纔會被稱之爲"當即調用函數表達式".
• 由於JavaScript基於函數塊的做用域規則, 在匿名函數內聲明變量都是局部變量, 因此這些局部變量沒辦法直接從外部獲取.

• 就像其餘函數同樣, 你能夠向匿名函數設定參數和傳遞變量. 你能夠根據這個特性, 利用匿名函數的做用域擴展它外圍函數的做用域(即閉包).

何時應該使用它?

1. 避免污染全局做用域

   IIFE最普遍的用途是避免污染全局做用域. 已經有不少JavaScript庫和JavaScript高手正在使用這種技巧, 尤爲是在最流行jQuery插件的開發者中. 你也應該把這個技巧應用在你的程序的主要文件中(main.js).

   在這個例子中, 我使用了匿名函數把全部全局做用域的變量變成了局部變量, 因此如今全局做用域中還能夠定義新的變量, 不用顧忌是否會和匿名函數內的變量在變量名上發生衝突(還包括其餘庫或者框架):

   //全部的代碼包含在當即調用函數中
   (function() {
     var firstName = "Richard";
     funtion init() {
       doStuff(firstName);
       //在這裏開始插入應用程序的代碼...
     }
   
     function doStuff() {
       //...
     }
   
     function doMoreStuff() {
       //...
     }
   
     //啓動應用程序;
     init();
   })();

2. 用做條件選擇器

   這種使用方式尚未被普遍所知, 但它是至關強大的. 你能夠不調用一個命名函數來處理複雜的運算的. 注意在三目運算符(.. ? .. : .. )中的兩個匿名函數, 我儘量多地加入空白來使語句看起來更容易理解:

   var unnamedDocs = [],
       namedDocs = ['a_bridge_runover', 'great_dreamers'];
   
   function createDoc(documentTitle) {
     var documentName = documentTitle
   
     ?
   
     (function(theName) {
       var newNamedDoc = theName.toLocaleLowerCase().replace('', '_');
       nameDocs.push(newNamedDoc);
   
       return newNamedDoc;
     })(documentTitle)
   
     :
   
     (function() {
       var newUnnamedDoc = 'untitled_' + Number(namedDocs.length + 1);
       unnamedDocs.push(newUnnamedDoc);
       return newUnnamedDoc;
     })();
   
     return documentName;
   }
   
   createDoc('Over The Rainbow'); //over_the rainbow
   createDoc(); //untitled_4