JS的IIFE
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.html、https://www.jianshu.com/p/af9283d20ba5、https://www.cnblogs.com/yiven/p/8462666.html
JS的IIFE的更多相关文章
- 说一说JS的IIFE
1. 定义IIFE: Immediately Invoked Function Expression,意为立即调用的函数表达式,也就是说,声明函数的同时立即调用这个函数.对比一下,这是不采用IIFE时 ...
- 学习rollup.js模块文件打包
学习rollup.js模块文件打包 一:rollup 是什么?Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码. webpack 和 Rollup 对比不同点 ...
- Vue 2.0 入门系列(15)学习 Vue.js 需要掌握的 es6 (2)
类与模块 类 es6 之前,通常使用构造函数来创建对象 // 构造函数 User function User(username, email) { this.username = username; ...
- 深入学习rollup来进行打包
深入学习rollup来进行打包 阅读目录 一:什么是Rollup? 二:如何使用Rollup来处理并打包JS文件? 三:设置Babel来使旧浏览器也支持ES6的代码 四:添加一个debug包来记录日志 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程
缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...
- rollupjs 基本试用
备注: 前端构建工具 1. 安装 yarn global add rollup yarn global add rollup 2. 基本使用 touch index.js index.js ...
- Rollup 配置 es6 环境
前 为了可以使用新型的语法,顺便在兼容下老的浏览器,所以需要自己搭建个环境,目前我个人推崇使用 rollup,主要喜欢它的 tree-shake,打包出来的代码真的很简洁. 配置 rollup.con ...
- 实用程序包utils - 基于Rollup打包输出各模块文件(二)
上一次,我们讲到了如何去搭建一个前端工具库的工程,那么今天我们来聊一聊如何去将其打包输出. 需求 事情是这个样子的.我有一个这样的需求,或者是我发现有这么一个需求.就是有时候吧,我也不想搞的那么复杂, ...
- 使用 vite 构建一个表情选择插件
初始化 Vite 基于原生 ES 模块提供了丰富的内建功能,开箱即用.同时,插件足够简单,它不需要任何运行时依赖,只需要安装 vite (用于开发与构建)和 sass (用于开发环境编译 .scss ...
随机推荐
- pytorch-API实现线性回归
示例: import torch import torch.nn as nn from torch import optim class MyModel(nn.Module): def __init_ ...
- 用asp.net core结合fastdfs打造分布式文件存储系统
最近被安排开发文件存储微服务,要求是能够通过配置来无缝切换我们公司内部研发的文件存储系统,FastDFS,MongDb GridFS,阿里云OSS,腾讯云OSS等.根据任务紧急度暂时先完成了通过配置来 ...
- 2019-2020-1 20199328《Linux内核原理与分析》第五周作业
实验要求: 实验步骤: 这里以20号系统调用getpid为例进行实验,该函数的功能为:返回当前进程标识. getpid.c代码: 查看实验结果: 当前进程pid为:31042. 在C语言中编入汇编代码 ...
- Git 简明手册
0,Git 是什么 Git 是一个VCS(Version Control System),即版本控制系统. 版本控制系统从字面意思来看,它的用途就是管理/控制文件的版本.使用它,可以方便的知道一个文件 ...
- Unity 极简UI框架
写ui的时候一般追求控制逻辑和显示逻辑分离,经典的类似于MVC,其余大多都是这个模式的衍生,实际上书写的时候M是在整个游戏的底层,我更倾向于将它称之为D(Data)而不是M(Model),而C(Ctr ...
- 16.What is pass in Python?
What is pass in Python? Pass means, no-operation Python statement, or in other words it is a place h ...
- 利用POI工具读取word文档并将数据存储到sqlserver数据库中
今天实现了利用POI工具读取word文档,并将数据存储到sql数据库中,代码如下: package word; import java.io.File; import java.io.FileInpu ...
- ACM一年记,总结报告(希望自己可以走得很远)
一. 知识点梳理 (一) 先从工具STL说起: 容器学习了:stack,queue,priority_queue,set/multiset,map/multimap,vector. 1.stack: ...
- redis系列之3----redis高级应用(主从、事务与锁、持久化)
文章主目录 安全性设置 主从复制 事务与锁 持久化机制 发布以及订阅消息 上文<详细讲解redis数据结构(内存模型)以及常用命令>介绍了redis的数据类型以及常用命令,本文我们来学习下 ...
- C语言程序报告五
C程序设计实验报告 姓 名:赖瑾 实验地点:家 实验时间: 2020年4月21日 实验项目:6.3.1练习1 编写由三角形三边求面积的函数 6.3.1练习2 编写求N阶乘的函数 6.3.1练习3 求两 ...