• 关于立即调用的函数表达式(IIFE)


    在 JavaScript 中,圆括号 () 是一种运算符,跟在函数名之后,表示调用该函数。比如,print() 就表示调用 print 函数

    有时,我们需要在定义函数之后,立即调用该函数,例如:

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

    以上代码出现了语法错误
    原因是,function 这个关键字即可以当作语句,也可以当作表达式

    // 语句
    function f() {}
    
    // 表达式
    var f = function f() {}

    其中,JavaScript 引擎规定,如果 function 关键字出现在行首,一律解释成语句

    因此,上面错误的代码被认为这一段都是函数的定义,不应该以圆括号结尾,所以就报错了

    解决方法就是不要让 function 出现在行首,让引擎将其理解成一个表达式

    最简单的处理,就是将其放在一个圆括号里面

    // 解决方式一
    (function(){ /* code */ }());
    
    // 解决方式二
    (function(){ /* code */ })();

    上面两种写法都是以圆括号开头,引擎就会认为后面跟的是一个表示式,而不是函数定义语句,所以就避免了错误

    这就叫做“立即调用的函数表达式”(Immediately-Invoked Function Expression),简称 IIFE

    注意,上面两种写法最后的分号都是必须的。如果省略分号,遇到连着两个 IIFE,可能就会报错

    // 报错
    (function(){ /* code */ }())
    (function(){ /* code */ }())

    上面代码的两行之间没有分号,JavaScript 会将它们连在一起解释,将第二行解释为第一行的参数

    推而广之,任何让解释器以表达式来处理函数定义的方法,都能产生同样的效果,比如下面三种写法

    // 写法一
    var i = function(){ return 10; }();
    
    // 写法二
    true && function(){ /* code */ }();
    
    // 写法三
    0, function(){ /* code */ }();

    甚至像下面这样写,也是可以的。

    !function () { /* code */ }();
    ~function () { /* code */ }();
    -function () { /* code */ }();
    +function () { /* code */ }();


    通常情况下,只对匿名函数使用 IIFE

    它的目的有两个:一是不必为函数命名,避免了污染全局变量;

    二是 IIFE 内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量。

    // 写法一
    var tmp = newData;
    processData(tmp);
    storeData(tmp);
    
    // 写法二
    (function () {
    var tmp = newData;
    processData(tmp);
    storeData(tmp);
    }());

    上面代码中,写法二比写法一更好,因为完全避免了污染全局变量

  • 相关阅读:
    价值观
    周记 改
    周记
    C语言问卷调查
    icon踩坑记录
    console.log(a)和console.log(window.a)的区别?
    记录一次微信二次分享的优化过程
    在jQuery中使用自定义属性
    10个JS技巧
    日常工作总结 2019/10/10
  • 原文地址:https://www.cnblogs.com/Leophen/p/11558394.html
Copyright © 2020-2023  润新知