美文网首页JS学习笔记
JS立即执行函数

JS立即执行函数

作者: zh2443 | 来源:发表于2018-11-21 22:30 被阅读0次

        很多时候我们在js中定义一个函数后,只需要执行该函数一次,比如数据初始化函数;这种情况下,定义一个函数就会浪费内存空间,这是我们可以使用立即执行函数(Immediately-Invoked Function Expression 即IIFE)。

    函数调用

    方式1:

        定义一个函数后,我们可以通过()进行调用,如下:

                function fn(){}

                fn();

        那么我们是否可以通过如下的方式直接调用函数呢?

                function fn(){}();      //SyntaxError: Unexpected token )

        结果是报语法错误,因为语句是无法执行的,所以js解析器在解析时,把该语句解析成了一个函数和一个分组操作符,如下:

                function fn(){}

                ();

        而分组操作符内不能为空,所以报了语法错误。

     方式2:

        另一个在函数定义和调用的方式如下:

                var fn = function(){};

                fn();

        可以看出,匿名函数赋值给一个变量后,也可以作为函数被调用,那么是否可以通过如下方式直接调用函数呢?

                function(){}();      //SyntaxError: Unexpected token (

        结果依然是报语法错误,原因是js解析时,除非显示的将函数定义为表达式,否则解析器都会将其当做函数申明,而上面的语句就是将其当做了函数申明,而函数声明必须要有函数名,故解析都( 括号后报错。

    实现立即调用

        通过上面的分析可以看出,一个函数如果想要立即执行,那么就必须显示的将函数定义为表达式的形式。故可以通过如下的一些方式,定义一个立即执行函数:

        1. (function(){}())  //最推荐的方式,外面的括号将内部的函数显示的定义为函数表达式

        2. (function(){})()    //完全等同于以上的方式

        3. !function(){}();  // 通过!元素符将函数显示的定义为表达式,然后执行,同理:+,- 也可以

        4. var fn = function(){}();  //通过赋值运算符将函数显示的定义为表达式,然后执行

    总之,实现函数立即执行的方式很多,但有的会与函数的返回值进行运行,如:!,+,- ;为了避免这种麻烦,我们通常采用1和2两种方式定义。

    作用

        立即执行函数的作用:

            1. 解决闭包中的状态保存问题;(常见的一个函数内部返回多个函数,调用这些函数,打印父函数内部变量的问题)

            2. 模块化开发中,定义私有变量,防止污染全局;

            3. 初始化数据和页面

    注意:函数表达式定义的函数,函数名外部无法引用,如下:

      1.  var fn = function f(){};

          console.log(typeof f);  //打印undefined,函数表达式的函数名f在外部是访问不到的

       2. if(function f(){}){

                console.log(typeof f);  //同理,打印undefined,if语句中的函数解析为函数表达式,函数名f在外部是访问不到的

            }

        

    相关文章

      网友评论

        本文标题:JS立即执行函数

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