前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >理解JavaScript立即执行函数

理解JavaScript立即执行函数

原创
作者头像
伯爵
修改2019-10-11 10:56:08
1.1K0
修改2019-10-11 10:56:08
举报
文章被收录于专栏:前端小菜鸟

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

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

代码语言:txt
复制
// 第一种:
(function() {/* */})();

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

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

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

代码语言:txt
复制
!function(){}();
+function(){}();
-function(){}();
~function(){}();

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

代码语言:txt
复制
new function(){ /* code */ }
new function(){ /* code */ }() 

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

代码语言:txt
复制
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)项目被广泛使用:

代码语言:txt
复制
var val = 'global';
(function(fun){
    fun(window);
})(function def(global) {
    var val = 'function';
    console.log(val); //function
    console.log(global.val); // global
})
  • 模块模式

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

代码语言:txt
复制
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
参考

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 参考
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档