理解JavaScript立即执行函数

原创

伯爵

修改于 2019-10-11 10:56:08

1.1K0

修改于 2019-10-11 10:56:08

文章被收录于专栏：前端小菜鸟

IIFE (Immediately Invokable Function Expressions)：是在函数声明后立即调用的函数表达式。

立即执行函数通常包含两种使用格式，具体使用那一种风格可以根据个人习惯和团队规范选择：

// 第一种:
(function() {/* */})();

// 第二种:
(function(){/* */}())

// 也可以使用箭头函数声明
;(() => {/* */}())

数学符号都会导致函数立即执行，因为JavaScript引擎会将函数判断为表达式，而不是函数声明。

!function(){}();
+function(){}();
-function(){}();
~function(){}();

new关键字也会导致函数被立即执行。

new function(){ /* code */ }
new function(){ /* code */ }()

IIFE的进阶使用是把它们作为函数调用进行传参调用：

var val = "global";
(function(global){
    var val = 'function';
    console.log(val) //function
    console.log(global.val) //global
}(window))

console.log(val)  //global

IIFE函数的作用：

避免污染全局在JavaScript函数内部，会形成一个块级作用域的概念，可以利用IIFE函数避免全局污染，比如JQuery插件的封装模式：(function($){ ``` //JQuery插件 })(jQuery);
倒置代码的运行顺序

这是一个《你不知道的JavaScipt》上的一个经典的例子，在UMD(Universal Module Definition)项目被广泛使用：

var val = 'global';
(function(fun){
    fun(window);
})(function def(global) {
    var val = 'function';
    console.log(val); //function
    console.log(global.val); // global
})

模块模式

IIFE函数可以创建单例对象，我们成为模块模式。

var count = (function() {
    var initVal = 0;
    var number = initVal;
    return {
        init: function() {
            number = initVal; 
        },
        get: function() {
            return number;
        },
        set: function(val) {
            number = val;
        },
        add: function() {
            return ++number;
        }
    }
}());

console.log(count.get()); //0
count.set(10);
console.log(count.add());//11
count.init();
console.log(count.add());// 1