1. 定义

IIFE: Immediately Invoked Function Expression,意为立即调用的函数表达式,也就是说,声明函数的同时立即调用这个函数。

首先我们要了解一般情况下什么是函数声明语句,什么是函数表达式语句,以便于接下来的实验。

辨别方法:以“function”开头的有名称的函数是函数声明语句。

  function a();    //函数声明语句

  var a = function();  //函数表达式语句

下面分析一道面试题:

var a = function(){}

var b = function(){}

console.log(a()+b());//输出结果是NaN

为什么输出结果是 NaN 呢?

因为解释器会把前面的 a() 认为是一个语句块的结束,后面的 ‘+’ 一元运算符有把后面 b() 转换为数字这么一个功能,所以得到的结果是NaN。因此我们在做自执行函数的时候,要把函数的声明变为函数表达式,这样就不会影响输出的结果了。

2. IIFE的常见形式

写法一:

(function(){

})()

写法二:

(function(){

}())

这两种写法效果完全一样,使用哪种写法取决于你的风格,貌似第一种写法比较常见。

3. IIFE的函数名和参数

不过函数名在这里没有意义,因为整个函数在执行时就立即调用了。当然也可以给一个函数名,这里我们就叫 IIFE。IIFE可以带(多个)参数,比如下面的形式:

var a = 2;
(function IIFE(global){
var a = 3;
console.log(a); //
console.log(global.a); //
})(window); console.log(a); //

这里 window是形参,global是实参,var a = 3 只在 IIFE 函数作用域中起效。

4. IIFE的优点

1. 创建块级(私有)作用域,避免了向全局作用域中添加变量和函数,因此也避免了多人开发中全局变量和函数的命名冲突

2. IIFE中定义的任何变量和函数,都会在执行结束时被销毁。这种做法可以减少闭包占用的内存问题,因为没有指向匿名函数的引用。只要函数执行完毕,就可以立即销毁其作用域链了。

以上参考 https://www.cnblogs.com/keketest/p/6121228.htmlhttps://www.jianshu.com/p/af9283d20ba5https://www.cnblogs.com/yiven/p/8462666.html

JS的IIFE的更多相关文章

  1. 说一说JS的IIFE

    1. 定义IIFE: Immediately Invoked Function Expression,意为立即调用的函数表达式,也就是说,声明函数的同时立即调用这个函数.对比一下,这是不采用IIFE时 ...

  2. 学习rollup.js模块文件打包

    学习rollup.js模块文件打包 一:rollup 是什么?Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码. webpack 和 Rollup 对比不同点 ...

  3. Vue 2.0 入门系列(15)学习 Vue.js 需要掌握的 es6 (2)

    类与模块 类 es6 之前,通常使用构造函数来创建对象 // 构造函数 User function User(username, email) { this.username = username; ...

  4. 深入学习rollup来进行打包

    深入学习rollup来进行打包 阅读目录 一:什么是Rollup? 二:如何使用Rollup来处理并打包JS文件? 三:设置Babel来使旧浏览器也支持ES6的代码 四:添加一个debug包来记录日志 ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程

    缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...

  6. rollupjs 基本试用

    备注:    前端构建工具   1. 安装 yarn global add rollup yarn global add rollup 2. 基本使用 touch index.js index.js ...

  7. Rollup 配置 es6 环境

    前 为了可以使用新型的语法,顺便在兼容下老的浏览器,所以需要自己搭建个环境,目前我个人推崇使用 rollup,主要喜欢它的 tree-shake,打包出来的代码真的很简洁. 配置 rollup.con ...

  8. 实用程序包utils - 基于Rollup打包输出各模块文件(二)

    上一次,我们讲到了如何去搭建一个前端工具库的工程,那么今天我们来聊一聊如何去将其打包输出. 需求 事情是这个样子的.我有一个这样的需求,或者是我发现有这么一个需求.就是有时候吧,我也不想搞的那么复杂, ...

  9. 使用 vite 构建一个表情选择插件

    初始化 Vite 基于原生 ES 模块提供了丰富的内建功能,开箱即用.同时,插件足够简单,它不需要任何运行时依赖,只需要安装 vite (用于开发与构建)和 sass (用于开发环境编译 .scss ...

随机推荐

  1. Thymeleaf入门入门入门入门入门入门入门入门入门入门入门

    Thymeleaf 官网部分翻译:反正就是各种好 Thymeleaf是用来开发Web和独立环境项目的服务器端的Java模版引擎 Spring官方支持的服务的渲染模板中,并不包含jsp.而是Thymel ...

  2. tp5.0看点

    前置操作:操作一些其他动作,例如要操作其他表格的数据啊,操作之前要有什么动作为前提或者要注意的动作. 模型事件:操作数据,例如照片的上传修改和删除. 两者的区别在于“前置操作”是动作,而“模型事件”只 ...

  3. linux下批量删除文件

    1. 在linux批量删除多级目录下同一格式的文件,可采用find + exec命令组合: 如在删除old目录下的,所有子目录中,后缀为.l的文件方法为: find old -type f -name ...

  4. [Batch脚本] if else 的格式

    必须写成一行 ) else (,否则报错. if %abc%=="yes" ( ... ) else ( ... )

  5. Ubuntu 之 win10更新ubuntu启动项消失

    问题描述: 昨晚windows更新,今天启动的时候发现启动项没有了,直接进入windows. 解决方案一: 首先进入BIOS看一看是否开启启动项选择,然后再把安全模式(secure boot)关闭(重 ...

  6. JSbridge 在Vue的封装与交互

    原文转自: 点我 写在 JSbridge.js let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator. ...

  7. C++课程设计,12306模拟写起来就是这么粗暴

    这篇文章很详细,也很多希望可以好好看看!看完C++稳过! 一.12306应该具备那些功能 1.查询(一个月以内的): 1.查车票:出发地+目的地+出发时间->显示经过两站车票信息 (余票,车次信 ...

  8. CF思维联系–CodeForces - 222 C Reducing Fractions(数学+有技巧的枚举)

    ACM思维题训练集合 To confuse the opponents, the Galactic Empire represents fractions in an unusual format. ...

  9. The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 B so easy

    题目链接:https://nanti.jisuanke.com/t/41384 这题暴力能过,我用的是并查集的思想,这个题的数据是为暴力设置的,所以暴力挺快的,但是当他转移的点多了之后,我觉得还是我这 ...

  10. 题目分享P

    题意: 给出一棵n个节点的树,这棵树的每条边有一个权值,这个权值只可能是0或1. 在一局游戏开始时,会确定一个节点作为根.接下来从女生开始,双方轮流进行 操作.当一方操作时,他们需要先选择一个不为根的 ...