前端面试自测知识点-立即执行函数

迷南。 2022-09-09 12:52 315阅读 0赞

#### 立即执行函数 ####

##### 两种常见的写法： #####

(function(){ ...})()
    (function(){ ...}())
    
    (function(){ console.log(888)}()) // 立刻输出 888
    (function(){ console.log(888)})() // 立刻输出 888
    
    var fnName = function(){ console.log(666)}() // 立刻输出 666 undefined

##### 基本概念： #####

*  **函数声明**：`function fname(){...};`使用function关键字声明一个函数，再指定一个函数名。
 *  **函数表达式**：`var fname=function(){...};` 使用function关键字声明一个函数，但未给函数命名，最后将匿名函数赋予给一个变量。
 *  **匿名函数**：`function(){};` 使用function关键字声明一个函数，但未给函数命名。（匿名函数也属于*函数表达式*。）（匿名函数作用很多，赋予一个变量则创建函数，赋予一个事件则成为事件处理程序等）

##### 函数声明和函数表达式的区别： #####

*  函数声明的Function declaration Hoisting（换成人话就是**函数声明提升**，也就是说调用可以在声明前面），函数表达式不具备这点，它需要被js代码解析到当前这行时才可以调用
 *  函数表达式后边加`()`立即调用该函数（注意：函数声明不可以这样，它只能以fname()调用）

fName();
    function fName(){ ...}//正确，函数声明提升，所以 fName()可以写在函数声明之前。
    
    fName();
    var fName=function(){ ...}//错误，函数表达式不具备函数声明提升。
     
    var fName=function(){ ...}();//正确，函数表达式后边加()立即调用函数。
     
    function fName(){ ...}();//错误，函数声明必须用fName()调用。 
    //这行代码被解析为两部分： 1函数声明 function fName(){...}, 2分组表达式(),这表达式有误，因为括号内没有表达式，
    //Javascript引擎看到function关键字之后，认为后面跟的是函数定义语句，而在一条语句后面加上() 会被当做分组操作符，分组操作符里必须要有表达式，所以这里报错，不应该以圆括号结尾。以圆括号开头，引擎就会认为后面跟的是一个表示式，而不是函数定义，所以就避免了错误
    
    function (){ ...}();//匿名函数不可以这么调用，因为function(){...}被当做了声明，声明不可以直接()调用。
    // 可以改成下面这样
    (function (){ ...})();

var fnName = function(){ console.log(666)}
    undefined
    var fnName = function(){ console.log(666)}()
    666
    undefined

##### 立即调用IIFE（Immediately Invoked Function Expression） #####

*  `(function(){...})()` 和 `(function(){...}())` 是没区别的
 *  传统的定义函数：
    
        function foo(){ ...} //这是定义，Declaration,只是让解释器知道其存在，不会运行
         
        foo(); //这是语句，解释器遇到语句会运行它
 *  为什么要IIFE呢？ 1：传统的方法啰嗦。 2：传统的方法污染全局命名空间
 *  `function foo(){...}()`这样写有问题，Javascript引擎看到function关键字之后，认为后面跟的是函数定义语句，而在一条语句后面加上() 会被当做分组操作符，分组操作符里必须要有表达式，所以就会认为是错的
 *  所以，只需要把函数声明变成函数表达式就可以了，最常见的方法是用一对() 包裹起来：`(function foo(){...})();`
    
        (function foo(){ ...})();
        // 等价于
        var foo= function(){ ...};
        foo();
 *  让JavaScript引擎认为这是一个表达式的方法：
    
        !function(){ }();
        +function(){ }();
        -function(){ }();
        ~function(){ }();
        new function(){  /* code */ }
        new function(){  /* code */ }() // 只有传递参数时，才需要最后那个圆括号

##### 立即执行函数的作用 #####

*  创建一个独立的作用域，外面访问不到，避免变量污染
    
        var liList = ul.getElementsByTagName('li')
        for(var i=0; i<6; i++){ 
          liList[i].onclick = function(){ 
            alert(i) // 为什么 alert 出来的总是 6，而不是 0、1、2、3、4、5
          }
        }
    
    因为输出的 i 是全局作用域的，当循环结束后 i 的值是 6，所以输出的 i 就是6。
    
    用立即执行函数可以解决这个问题：
    
        var liList = ul.getElementsByTagName('li')
        for(var i=0; i<6; i++){ 
          (function(j){ 
            liList[j].onclick = function(){ 
              alert(j) // 0、1、2、3、4、5
            }
          })(i)
        }
    
    因为 JS 中调用函数传递参数都是值传递 ，所以当立即执行函数执行时，首先会把参数 i 的值复制一份，然后再创建函数作用域来执行函数，循环5次就会创建5个作用域，所以每个 li 元素访问的都是不同作用域的 i 的值
 *  **立即执行函数和闭包没有什么关系，只是两者会经常结合在一起使用而已，但两者有本质的不同**
 *  立即执行函数和闭包只是有一个共同优点就是能减少全局变量的使用
 *  立即执行函数只是函数的一种调用方式，只是声明完之后立即执行，这类函数一般都只是调用一次，调用完之后会立即销毁，不会占用内存
 *  闭包则主要是让外部函数可以访问内部函数的作用域，也减少了全局变量的使用，保证了内部变量的安全，但因被引用的内部变量不能被销毁，增大了内存消耗，使用不当易造成内存泄露（这一点不见得是坏事，因为使用闭包本来就是为了保护一些要长时间存在于内存的变量，本身就属于不想被销毁的变量）