详解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 相关文章推荐
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
vuex存储token示例
Nov 11 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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
PHP XML备份Mysql数据库
2009/05/27 PHP
PHP 输出缓存详解
2009/06/20 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
js动态切换图片的方法
2015/01/20 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
python range实例用法分享
2020/02/06 Python
python属于跨平台语言码
2020/06/09 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
护士求职推荐信范文
2013/11/23 职场文书
高中自我鉴定
2013/12/20 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
党员反邪教心得体会
2016/01/15 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
idea下配置tomcat避坑详解
2022/04/12 Servers