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