JS中的匿名函數自執行、函數聲明與函數表達式

先看一段jQuery源碼中匿名函數自執行的例子：

  (function( window, undefined ) {
      // jquery code
  })(window);

另外一種常見的寫法：

  +function( $ ) {
      // jquery code
  })(window.jQuery);

這兩種寫法該如何理解呢？第二種寫法前面為何要加“+”號，不加會是什么結果呢？

  function( $ ) {
      // jquery code
  })(window.jQuery); // 報錯: Uncaught SyntaxError: Unexpected token (

先理解一些概念性的東西 

函數表達式(Function Expression)

• 將函數定義為表達式語句（通常是變量賦值）的一部分
• 通過 Function Expression 定義的函數可以是命名的，也可以是匿名的
• Function Expression 不能以“function”開頭，只用通過函數左側的變量來調用

  a(); // 錯誤調用 Uncaught TypeError: a is not a function
  var a = function(){
    alert('Function expression');
  }
  a(); // 正確

 

函數聲明(Function Declaration)

• 可以定義命名的函數變量，而無需給變量賦值
• 函數聲明在JS解析時進行函數提升，因此在同一個作用域內，不管函數聲明在哪里定義，該函數都可以進行調用
• JS將function當作一個函數聲明的開始，而函數聲明后面不能跟圓括號直接進行調用 

  a(); // 這里可以正確調用
  function a(){
    alert('Function declaration');
  }
  a();  // 這里可以正確調用

 

錯誤原因解析

  function( $ ) {
      // jquery code
  })(window.jQuery); // 報錯: Uncaught SyntaxError: Unexpected token (

• 當js編譯器開始執行的時候，碰見function之后，看到它周圍沒有任何東西。於是就把function關鍵字解析成函數聲明，而函數聲明后面不能跟圓括號直接進行調用，因此導致后面運行出錯了
• 我們只需要用一個括號把這個匿名函數包裹起來，或者前面使用如-,~,!這種其它的一元操作符，目的是告訴解析器在這些特定操作符附近的是一個表達式，避免js編譯器將function關鍵字解析成函數聲明，然后代碼就能夠正常執行

參考

https://www.jianshu.com/p/82cb460af066

https://www.cnblogs.com/cndotabestdota/p/5664112.html