详解javascript立即执行函数表达式IIFE


Posted in Javascript onFebruary 13, 2017

一、IIFE解释

全拼Imdiately Invoked Function Expression,立即执行的函数表达式。

像如下的代码所示,就是一个匿名立即执行函数:

(function(window, undefined){
 // 代码... 
})(window);

二、括号的意义

2.1 包住function(){}的括号的意义

这个括号的目的,是为了把function(){}转化为表达式。像一些库的源码,喜欢用如下方式代替:

~function(){
 // 代码...
}();

或者这种方式:

+function(){
 // 代码...
}();

其实,作用都一样,都是把function(){}转化成一个可执行的表达式,方便执行。

如果去掉该括号,则会报错。因为单纯的function(){}不是可执行的表达式,会直接报错。如下图:

详解javascript立即执行函数表达式IIFE

2.1 第二个括号的意义

理解了第一个括号的意义,第二个括号就很简单了,就是执行表达式了。

三、参数的意义

以这段代码为例子,讲解参数

var wall = {};
(function(window, WALL, undefined){
})(window, wall);

参数分为形参和实参。

function(window, WALL, undefined)三个参数为形参,第二个括号(window, wall)的两个参数为实参。

也即可以理解为 window == window,wall == WALL。

2.1 普通形参

普通形参是指由window和wall这样的实际变量传入指定,可以为任何类型的变量。一个形参就对应一个实参

2.2 特殊形参undefined

为什么形参要多写一个undefined,这是一个很有趣的话题。

可以知道这个示例,实参只有两个,而形参有三个。所以在函数执行的时候,形参undefined会默认赋值为undefined。

形参undefined的作用如下:

2.2.1 防止特殊值undefined被恶意代码篡改。

IE6等低版本浏览器,undefined是支持被修改的。而这个特殊值被修改后,像以下这种判断就失效了。

if(wall == undefined){
 // 代码...
}

所以,这里多加一个形参的目的就是为了防止这种情况发生。只要在这个IIFE作用域内,undefined就能够正常获取到。

2.2.2 压缩代码可以压缩undefined

因为undefined作为形参,像YUI compressor这种类型的代码压缩工具,可以将其相关的值进行压缩,减小文件的体积。

四、写法解析

4.1 普通写法

var wall = {}; // 声明定义一个命名空间wall
// 定义方法
(function(window, WALL, undefined){
 // 给wall命名空间绑定方法say
 WALL.say = function(){
  console.log('hello');
 };
})(window, wall);
(function(window, WALL, undefined){
 // 给wall命名空间绑定方法 whoIam
 WALL.whoIam = function(){
  console.log('wall');
 };
})(window, wall);
// 调用
wall.say();
wall.whoIam();

先定义一个命名空间,然后再给这个命名空间加东西。这是最普遍的写法,也是最好理解的。

不足的地方就是必须先声明一个命名空间,然后才能执行相关的绑定代码。存在顺序加载的问题。

4.2 放大模式

var wall = (function(window, WALL, undefined){
 if(typeof WALL == 'undefined'){
  WALL = {};
 }
 // 给wall命名空间绑定方法say
 WALL.say = function(){
  console.log('hello');
 }
 return WALL; // 返回引用
})(window, wall);
var wall = (function(window, WALL, undefined){
 if(typeof WALL == 'undefined'){
  WALL = {};
 }
 // 给wall命名空间绑定方法 whoIam
 WALL.whoIam = function(){
  console.log('wall');
 }
 return WALL; // 返回引用
})(window, wall);
// 调用
wall.say();
wall.whoIam();

放大模式的好处就是,可以不用考虑代码加载的先后顺序。

因为js允许wall变量进行重复var声明,所以这段代码是可以执行的。

我可以把IIFE函数拆分成多个文件进行加载,而不会出现普通写法需要注意的问题。

需要注意的点:

1.IIFE的头部,都要先进行检查命名空间是否已经实例化,如果还没实例化,则进行实例化。

2.IIFE的尾部,都要return命名空间的引用,使后续代码能够得到最新的wall命名空间内容。

4.3 宽放大模式

(function(window, WALL, undefined){
 // 给wall命名空间绑定方法say
 WALL.say = function(){
  console.log('hello');
 }
})(window, window.wall || (window.wall = {}));
(function(window, WALL, undefined){
 // 给wall命名空间绑定方法 whoIam
 WALL.whoIam = function(){
  console.log('wall');
 }
})(window, window.wall || (window.wall = {}));
// 调用
wall.say();
wall.whoIam();

宽放大模式的重点注意的地方:就是在实参部分的window.wall || (window.wall = {})。

用||运算符进行取巧。

如果window.wall是已经实例化的,非not defined。则直接返回window.wall的引用,赋值给形参WALL。不会执行||运算符后面的内容。

如果window.wall还未实例化,则进行实例化。这里要注意的点是实例化是一个赋值操作,需要用括号包起来,变成表达式去执行,才不会报错。

表达式(window.wall = {})执行完毕后,会返回新对象window.wall的引用。

宽放大模式的好处:是可以切割成多个文件进行加载,而不必考虑文件加载的先后顺序,不存在强耦合关系。

当然,如果IIFE里面的方法互相引用,还是存在加载依赖的问题。这个问题可以用加载器Require.js等工具解决,这里就不讨论了。

五、分文件加载IIFE要注意的点

;(function(window, WALL, undefined){
 // 给wall命名空间绑定方法say
 WALL.say = function(){
  console.log('hello');
 }
})(window, window.wall || (window.wall = {}));

眼尖的已经看出区别了,就是文件开始的地方,先写上分号;。

这样,多个文件合并的时候,才不会出现收尾相接,代码出现错乱的问题。比如下面这种情况:

// a.js 文件
wall.log()
// b.js 文件
(function(window, WALL, undefined){
 // 给wall命名空间绑定方法say
 WALL.say = function(){
  console.log('hello');
 }
})(window, window.wall || (window.wall = {}));

由于a.js文件的wall.log()少写了分号,跟b.js文件合并后,js就会认为‘wall.log()(...)'是需要这么执行的,结果代码就报错了。

觉得不错的,可以关注模块化这个系列的文章,容我后续码字,敬请期待!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript smipleChart 简单图标类
Jan 12 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
vue中echarts引入中国地图的案例
Jul 28 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 Javascript
jQuery实现大图轮播
Feb 13 #Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 #Javascript
你真的了解BOM中的history对象吗
Feb 13 #Javascript
微信小程序-获得用户输入内容
Feb 13 #Javascript
js实现textarea限制输入字数
Feb 13 #Javascript
Canvas实现动态的雪花效果
Feb 13 #Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 #Javascript
You might like
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
BBS(php & mysql)完整版(六)
2006/10/09 PHP
php构造函数实例讲解
2013/11/13 PHP
Laravel 5 学习笔记
2015/03/06 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
Swift中的协议(protocol)学习教程
2016/07/08 Python
Python测试人员需要掌握的知识
2018/02/08 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
园林毕业生自我鉴定范文
2013/12/29 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
银行办公室岗位职责
2014/03/10 职场文书
连锁超市项目计划书
2014/09/15 职场文书
大国崛起英国观后感
2015/06/02 职场文书
赤壁观后感(2)
2015/06/15 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
Python字符串常规操作小结
2022/04/03 Python
vue使用watch监听属性变化
2022/04/30 Vue.js