详解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 相关文章推荐
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
JS定义类的六种方式详解
May 12 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
微信小程序模板template简单用法示例
Dec 04 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
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
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
Python算法应用实战之队列详解
2017/02/04 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
Python 求向量的余弦值操作
2021/03/04 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
一名毕业生的自我鉴定
2013/12/04 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电