函数 进阶学习之四： 函数和函数表达式的区别 与 IIFE 的原理

一 ：函数和函数表达体

1.前文 提到声明一个变量 和 定义一个变量，那么对于函数，也存在这个问题，这里 要区分 函数 和 函数表达体

function keqing(){   //函数
    alert('Hi~');  
}

var keqing = function(){  //函数表达式
　　alert('Hi~')
}

 

function foo() {...}     // 这是定义，Declaration；定义只是让解释器知道其存在，但是不会运行。
foo();                   // 这是语句，Statement；解释器遇到语句是会运行它的。

 

 

 

2.函数的函数声明有一个重要特征 —— 函数声明提升（即前文提到的Hoisting）

keqing();   // 正常执行 弹出Hi~
function keqing(){   
　　alert('Hi~');
}
函数：在读取执行代码之前会先读取函数声明

 


keqing();  //报错  Uncaught TypeError: keqing is not a function
var keqing = function(){
　　alert('Hi~');
}
函数表达式：没有函数声明提升，在执行前必须先赋值

二：IIFE 的真相

在Bootstrap源码(具体请看《Bootstrap源码解析》)和其他jQuery插件经常看到如下的写法： 

+function ($) {   
  
}(window.jQuery); 

这种写法就是 IIFE （Imdiately Invoked Function Expression 立即执行的函数表达式）

 

结论1：
函数表达式中的函数可以为匿名函数，也可以有函数名，但是该函数实际上不能直接使用，只能通过表达式左边的变量 a 来调用。

var a = function(){  
  alert(0);  
}  
var b = new a(); //可以弹出 0
直接 a(); 也可以执行 弹出0.个人觉着还是 直接执行a();比较直观，

 

结论2：
函数声明时必须有函数名。 

三：使用

那么为什么要 IIFE？
1.传统的方法啰嗦，定义和执行分开写；
2.传统的方法直接污染全局命名空间（浏览器里的 global 对象，如 window）
于是，开发者们想找一个可以解决以上问题的写法：function foo(...){}();

但是：这样写是不行的

因为 function foo(...){} 这个部分只是一个声明，函数并没有执行，对于解释器来说，就好像你写了一个字符串 "function foo(...){}"，它需要使用解析函数，比如 eval() 来执行它才可以。

所以把 () 直接放在声明后面是不会执行，这是错误的语法。

如何把它变得正确？说起来也简单，只要把 声明 变成 表达式（Expression） 就可以了，

最常见的办法是把函数声明用一对 () 包裹起来

例如

(function foo() {...})    // 这里是故意换行，实际上可以和下面的括号连起来
();
//这就等价于：
var foo = function () {...};    // 这就不是定义，而是表达式了。
foo();

注意：function foo(...){}();

也可以直接用括号包起来，这也是一种等价的表达式：(function foo(){...}());

所以：以后见到(function foo(){...}());和  (function foo(){...})()是一样的。没啥区别！！

一般用(function (){}) 还有个作用,就是 避免全局变量

 

总计一下实现方法：

方法：通过一元操作符+变成了函数表达式。也可以使用 - ~ ！等其他一元运算符或者括号，目的是为了引导解析器，指明运算符附近是一个表达式。以下是三种经典方式 ：

+function () {     
};  
  
(function () {  
});  
  
void function() {  
}; 

然后，在末尾加个()；函数表达式通过 末尾的() 来调用并运行，就不会报错了。就是一个IIFE。

+function () {   
}();  
  
(funtion () {  
})();  

四：使用IIFE的好处

4.1、减少作用域查找。使用IIFE的一个微小的性能优势是通过匿名函数的参数传递常用全局对象window、document、jQuery，在作用域内引用这些全局对象。JavaScript解释器首先在作用域内查找属性，然后一直沿着链向上查找，直到全局范围。将全局对象放在IIFE作用域内提升js解释器的查找速度和性能。

//传递全局对象到IIFE的一段代码示例
// Anonymous function that has three arguments  
function(window, document, $) {  
  
  // You can now reference the window, document, and jQuery objects in a local scope  
  
}(window, document, window.jQuery); // The global window, document, and jQuery objects are passed into the anonymous function  
//

4.2、有利于压缩。另一个微小的优势是有利于代码压缩。既然通过参数传递了这些全局对象，压缩的时候可以将这些全局对象匿名为一个字符的变量名（只要这个字符没有被其他变量使用过）。如果上面的代码压缩后会变成这样：

// Anonymous function that has three arguments  
function(w, d, $) {  
  
  // You can now reference the window, document, and jQuery objects in a local scope  
  
}(window, document, window.jQuery); // The global window, document, and jQuery objects are passed into the anonymous function 

4.3、避免全局命名冲突。当使用jQuery的时候，全局的window.jQuery对象 作为一个参数传递给$，在匿名函数内部你再也不需要担心$和其他库或者模板申明冲突

4.4、通过传参的方式，可以灵活的加载第三方插件。

+function( KindEditor){  
  
    var editor  
    if(KindEditor){  
        KindEditor.ready(function(K) {  
  
            editor = K.create('textarea[data-name="kindeditor"]', {  
            resizeType : 1  
            })  
        })  
    }  
  
}(KindEditor || undefined)  

4.5结合IIFE的最佳实践，更好的写法是，立即执行document ready

+function ($) {  
  
  $(function(){  
  
  })  
  
}(window.jQuery)  

4.6最佳实践

// IIFE - Immediately Invoked Function Expression  
  +function(yourcode) {  
  
    // The global jQuery object is passed as a parameter  
    yourcode(window.jQuery, window, document);  
  
  }(function($, window, document) {  
  
    // The $ is now locally scoped   
  
   // Listen for the jQuery ready event on the document  
   $(function() {  
  
     // The DOM is ready!  
  
   })); 

 

五：自执行匿名函数剖析

 

(function( window, undefined ) {
    // code
})(window);
1.自执行匿名函数写法的好处：防止变量名冲突
2.为什么传入window：这样传入window可将其从全局变量变为局部变量，在函数作用域内可以直接访问到window，就不用将作用域链退回到顶层作用域了。
3.为什么增加参数undefined：由于undefined在一些情况下有可能会被重写，为确保在自执行匿名函数里的undefined是"真的undefined"，就需要增加参数undefined。

总结：

1.虽然叫自执行匿名函数，不要让自执行迷惑了。认为是自己执行！比如我开始进行代码实验的时候写过下面的代码

 

 

//实验一
<script type="text/javascript">
            (function(){
                    alert(1)
            })()
</script>
//实验二
<script type="text/javascript">
            (function(){
                              function foo(){
                    alert(1)
                           }
            })()
</script>

 

实验二是不会弹出1的。。。。。

2.结合目前项目中的js，很少用到这种样式，只有在写插件的时候才这样使用。

所以，到目前为止，先了解了他的原理，如果需要可以回来反复仔细的理解上述的 方法！！