[javascript]IIFE立即执行的函数表达式
近况:最近一直忙着找实习没有更新,不过学习还是在继续的。最近在写Node.js又稍带把javascript的角落知识捡了一遍,过半个月打算去看看python和一些CSS深层的书和博客。工作找的还好,拿了两份实习offer,决定好去当小二了。这几天在看司徒老师的《javascript框架设计》,开篇第一张讲种子模块(即核心模块)里面提到了一个没见过的缩写词IIFE,查了查、看了看。
1.什么是IIFE
IIFE是缩写,全拼Imdiately Invoked Function Expression,立即执行的函数表达式。
这时候可能就容易想起了这种语法:
(function(){
//......
})();
就是我们平时常写的匿名函数的立即执行语句。
IIFE就是这个,但是不止如此,还有另外的几种语句格式:+,-,~,!,void。
+function(){
//code 1
}();
-function(){
//code 2
}();
!function(){
//code 3
}();
~function(){
//code 4
}();
void function(){
//code 5
}();
(function(){
//code 6
})();
上面几个函数虽然格式不同,但是作用是一样的:使匿名函数立即执行。
其中最后一种(function(){//...})(),之前在学js,当时有本书里称()为强制运算符。其实不是,js没有强制运算符这个概念,第一对括号()即包裹在function外部的作用实际是给js解释器||引擎提供一种解析方案,提示解释器该括号内部包括的是一整体内容。第二个括号的作用是函数调用执行,但是如果直接通过function(){//....}()或者function A(){//...}();是不能执行的,因为引擎默认在遇到function(){}结构时会认为是函数声明,最后面的()会被单独解析,然后就语法报错了。
同理前几种IIFE语句也是通过一元操作符+-~!变成了函数表达式,目的是为了提示js解析器,告诉js解释器该运算符附近是一个表达式。
function A(){
//...
}();
//上面的写法被解析时等价于
function A(){
};
(); //报错
IIFE方式和正常的先声明再调用相比较,有如下的特点:
1.实现立即执行,不需要先声明再调用。
2.匿名函数自身不污染全局环境,同时为内部变量提供作用于环境空间。(现在主流的框架都是用这个方式来初始化命名空间的)
3.缩写形参有利于内部代码的压缩
4.提供闭包环境,可以做闭包想做的事情
(function(w,$){
//内部再次调用window对象和jQuery对象时,可直接使用w和$访问
})(window,jQuery);
同时通过传入全局对象也能使得作用域链上变量的查找变快一点。
但是这种方式存在一个“算不上问题”的问题,见过网上提出说这种方式会造成代码可读性差
虽然这种执行方式看上去很简单,却是几乎所有框架的种子模块的执行函数。(种子模块是框架中最先执行的部分,从功能来讲也是这个框架能够被使用的核心模块。种子模块的主要作用是创建命名空间、搭建基对象、提供函数拓展、事件绑定、冲突处理等等。IIFE就是框架自执行的“init函数”了。)
2.IIFE几种语句形式的区别
没啥区别,但是之前看到博客里面有人对这个做了下性能对比。找到了测试的原网站http://jsperf.com/iife-different-operator-efficiency,跑了一下,结果如图。

本机是mac,用的chrome41浏览器。void格式效果最好,和最差的+直接差了20%。+已经很高效了,所以我觉得没必要在意那一点差别,毕竟很少需要千万次调用IIFE格式的函数。后来又跑了一次,发现数值是在微动变化的。所以具体使用哪种就看习惯了。
下面是一些主流框架使用的格式:
jQuery1.10 (function(){//...})(window);
Bootstrap3 +(function(a){"use strict";//...})(jQuery);
AmazeUI !(function(){//...})
Zepto (function(){//...})();
IIFE就能写出来这么多,没太多干货,随手记个热闹。
[javascript]IIFE立即执行的函数表达式的更多相关文章
- IIFE 立即执行的函数表达式
介绍IIFE IIFE的性能 使用IIFE的好处 IIFE最佳实践 jQuery优化 在Bootstrap源码(具体请看<Bootstrap源码解析>)和其他jQuery插件经常看到如下的 ...
- 笔记:IIFE 立即执行的函数表达式 +function ($) { }(window.jQuery);
在Bootstrap源码(具体请看<Bootstrap源码解析1>)和其他jQuery插件经常看到如下的写法: +function ($) { }(window.jQuery); 这种写法 ...
- JavaScript:立即执行的函数表达式
先要理解清楚几个概念: 以下转自:http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.html 问题的核心 当你声明类似functio ...
- JavaScript高级程序设计学习笔记--函数表达式
关于函数声明,它的一个重要特征就是函数声明提升,意思是在执行代码之间会读取函数声明,意思是在执行代码之前会先读取函数声明.这就意味着可以把函数声明放在调用它的语句 后面. sayHi(); funct ...
- 【javaScript基础】马上调用函数表达式
在javaScript中,每一个函数被调用时,都会创建一个新的运行上下文.由于在一个函数里面定义的变量和函数仅仅能在里面訪问.在外面是不行的.上下文提供了一种非常easy的方法来创建私有性. //ma ...
- 更优雅的方式: JavaScript 中顺序执行异步函数
火于异步 1995年,当时最流行的浏览器--网景中开始运行 JavaScript (最初称为 LiveScript). 1996年,微软发布了 JScript 兼容 JavaScript.随着网景.微 ...
- javascript高级程序设计读书笔记----函数表达式
定义函数两种方式: 1.函数声明 function sayHi(){ alert("Hi"); } sayHi();//调用函数 2.函数表达式 var sayHi = funct ...
- javascript之小积累-匿名函数表达式的最佳实践
在写js的时候,还是经常会用的匿名函数表达式,比如 setTimeout(function() { console.log(110); }, 1000); 上面那个function()就是匿名函数表达 ...
- JS---------IIFE(Imdiately Invoked Function Expression 立即执行的函数表达式)
+function($){}(jQuery); 今天看到js代码里面有这个格式的代码,不知道啥意思,就去查了一下,我也是js小白.首先前面的+号,这个不是固定非要写+号,只要写一级运算符都可以.目的是 ...
随机推荐
- rubber
rubber - 必应词典 美['rʌbər]英['rʌbə(r)] n.橡胶:橡皮:黑板擦 v.涂橡胶于…:〈美俚〉同“rubberneck” 网络橡皮擦:胶皮:橡皮轮胎 变形复数:rubbers:
- centos7装NVIDIA显卡驱动
一.系统及显卡 系统:centos7.5 64位 显卡:gtx 1060 前几天主要是有一个人脸识别的项目测试,需要用到显卡去测试性能,然后装显卡的过程折腾了一下,特此记录. 二.安装过程 1. 下载 ...
- jquery-jsonp插件解决跨域问题
用jquery-jsonp插件解决ajax跨域问题,既可以实现ajax同样的请求效果,而且server服务端的相关代码也不用做任何改变. 代码如下: var url="http://loca ...
- Scrum使用心得 【转】
原文链接: http://blog.sina.com.cn/s/blog_58db96bc0100ymuk.html 1 Scrum管理模式和传统管理模式的区别 这些管理模式本质上目的相同: ...
- 【D3D】Direct3D中LPRECT(上左右底)和LPoint(x,y)之前转换
D3DSprite.cpp void CD3DSprite::DrawText(CD3DFont *pFont, char *szString, RECT &DesRect, D3DCOLOR ...
- 【转】MEF程序设计指南四:使用MEF声明导出(Exports)与导入(Imports)
在MEF中,使用[System.ComponentModel.Composition.ExportAttribute]支持多种级别的导出部件配置,包括类.字段.属性以及方法级别的导出部件,通过查看Ex ...
- linux下nginx tomcat集群
集群系统一般通过两台或多台节点服务器系统通过相应的硬件及软件互连,每个群集节点都是运行其自己进程的独立服务器. 这些进程可以彼此通信,对网络客户机来说就像是形成了一个单一系统,协同起来向用户提供应用程 ...
- Codeforces 709C 模拟
C. Letters Cyclic Shift time limit per test:1 second memory limit per test:256 megabytes input:stand ...
- 关于MySQL在内网中使用另一台机器访问的问题
要在内网中访问另一台机器的MySQL数据库,需要两步操作 一是把运行MySQL的机器的3306端口打开,最好是能限制访问IP保证安全性. 二是更改MySQL账户的访问权限.MySQL的root账户默认 ...
- 配置tomcat server.xml 文件 ,虚拟路径
<Context path="/web" docBase="D:\workspace\web\src\main\webapp" reloadable=& ...