美文网首页我爱编程
深入理解立即执行函数 2018-04

深入理解立即执行函数 2018-04

作者: jasonhsu9 | 来源:发表于2018-04-01 22:47 被阅读0次

    看过jQuery源码的人应该知道,jQuery开篇用的就是立即执行函数。立即执行函数常用于第三方库,好处在于隔离作用域,任何一个第三方库都会存在大量的变量和函数,为了避免变量污染(命名冲突),开发者们想到的解决办法就是使用立即执行函数。

    1.什么是立即执行函数(IIFE)

    在了解立即执行函数之前先明确一下函数声明、函数表达式及匿名函数的形式,请看:

     function test() {//函数声明
       console.log("test"); 
    }
    
    var test = function() { console.log("test"); };
    //上行代码即是--函数表达式,其中等号右边部分function() { console.log("test"); }即是匿名函数
    
    //但在程序中,匿名函数不能像function() { console.log("test"); } 这样单独存在
    //除非用立即执行的方式,看下一段code
    

    接下来看立即执行函数的两种常见形式:( function(){…} )()和( function (){…} () ),一个是一个匿名函数包裹在一个括号运算符中,后面再跟一个小括号,另一个是一个匿名函数后面跟一个小括号,然后整个包裹在一个括号运算符中,这两种写法是等价的。要想立即执行函数能做到立即执行,要注意两点,一是函数体后面要有小括号(),二是函数体必须是函数表达式而不能是函数声明。请看:

    (function(test) {
      console.log(test);
    })(123); //输出123, 使用()运算符
    
    (function(test) {
      console.log(test);
    }(1234)); //输出1234, 使用()运算符
    
    !function(test) {
      console.log(test);
    }(12345);  //输出12345, 使用!运算符
    
    -function(test) {
      console.log(test);
    }(123456);  //输出123456, 使用-运算符
    
    +function(test) {
      console.log(test);
    }(1234567);  //输出1234567, 使用+运算符
    
    var func = function(test) {
      console.log(test);
    }(12345678);  //输出12345678, 使用=运算符
    

    2.使用立即执行函数的好处

    通过定义一个匿名函数,创建了一个新的函数作用域,相当于创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏污染全局的命名空间。此时若是想访问全局对象,将全局对象以参数形式传进去即可,如jQuery代码结构:

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

    其中window即是全局对象。作用域隔离非常重要,是一个JS框架必须支持的功能,jQuery被应用在成千上万的JavaScript程序中,必须确保jQuery创建的变量不能和导入他的程序所使用的变量发生冲突。


    本文结束

    相关文章

      网友评论

        本文标题:深入理解立即执行函数 2018-04

        本文链接:https://www.haomeiwen.com/subject/vvfzcftx.html