专栏首页前端小菜鸟理解JavaScript立即执行函数
原创

理解JavaScript立即执行函数

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

参考

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES6装饰器Decorator的实现原理

    NOTE Decorators are an experimental feature that may change in future releases...

    伯爵
  • 自己实现一个JavaScript Promise类

    Promise对象用于表示一个异步操作的最终状态以及操作的值。Promise本质上是一个绑定了回调的对象,区别于将回调传入函数内部。

    伯爵
  • 理解JavaScript的闭包

    闭包(Closure)又称为词法闭包和函数闭包,由函数创造的一个词法作用域,创建在词法作用域的变量被引用后,可以在这个词法环境之外使用。

    伯爵
  • 命名函数表达式

    好文章,可惜中文译文已经无法访问了。不过在cssrain上找到一篇:www.cssrain.cn/demo/named%20function%20express...

    meteoric
  • 微生活时光机:去项目中挖掘JS模块化简史

    让我们把眼光投向微生活各个时期项目中的 JS 代码,看一看时代在其中投下的烙印,也许只是管中窥豹、走马观花,但通过其组织形式的异同,或可一瞥 JS 模块化层面的...

    江米小枣
  • highcharts 系统梳理笔记

    前言    highcharts最早接触它是在4年前,后来项目中很少用到图表这些东西,就算有也是用echart。他们思路都一样自己去官网上看api即可,构造数据...

    kmonkey
  • 学习PHP函数

    PHP 在用户自定义函数中支持可变数量的参数列表。在 PHP 5.6 及以上的版本中,由 ... 语法实现;在 PHP 5.5 及更早版本中,使用函数 fun...

    老雷PHP全栈开发
  • 认识PHP函数

    PHP 在用户自定义函数中支持可变数量的参数列表。在 PHP 5.6 及以上的版本中,由 ... 语法实现;在 PHP 5.5 及更早版本中,使用函数 fun...

    老雷PHP全栈开发
  • 前端模块化详解(完整版)

    在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随...

    Nealyang
  • webRTC 初探

    webRTC是英文Web Real-Time Communication的缩写,中文翻译网页实时通信,是浏览器不需要服务器的中转,可以直接通信的技术

    frontoldman

扫码关注云+社区

领取腾讯云代金券