深入理解javascript中的立即执行函数(function(){…})()


Posted in Javascript onJune 12, 2014

javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。

( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此。要理解立即执行函数,需要先理解一些函数的基本概念。

函数声明、函数表达式、匿名函数

函数声明:function fnName () {…};使用function关键字声明一个函数,再指定一个函数名,叫函数声明。

函数表达式 var fnName = function () {…};使用function关键字声明一个函数,但未给函数命名,最后将匿名函数赋予一个变量,叫函数表达式,这是最常见的函数表达式语法形式。

匿名函数:function () {}; 使用function关键字声明一个函数,但未给函数命名,所以叫匿名函数,匿名函数属于函数表达式,匿名函数有很多作用,赋予一个变量则创建函数,赋予一个事件则成为事件处理程序或创建闭包等等。

函数声明和函数表达式不同之处在于,一、Javascript引擎在解析javascript代码时会‘函数声明提升'(Function declaration Hoisting)当前执行环境(作用域)上的函数声明,而函数表达式必须等到Javascirtp引擎执行到它所在行时,才会从上而下一行一行地解析函数表达式,二、函数表达式后面可以加括号立即调用该函数,函数声明不可以,只能以fnName()形式调用 。以下是两者差别的两个例子。

fnName();
function fnName(){
  ...
}
//正常,因为‘提升'了函数声明,函数调用可在函数声明之前
 
fnName();
var fnName=function(){
  ...
}
//报错,变量fnName还未保存对函数的引用,函数调用必须在函数表达式之后
var fnName=function(){
  alert('Hello World');
}();
//函数表达式后面加括号,当javascript引擎解析到此处时能立即调用函数
function fnName(){
  alert('Hello World');
}();
//不会报错,但是javascript引擎只解析函数声明,忽略后面的括号,函数声明不会被调用
function(){
  console.log('Hello World');  
}();
//语法错误,虽然匿名函数属于函数表达式,但是未进行赋值操作,
//所以javascript引擎将开头的function关键字当做函数声明,报错:要求需要一个函数名

在理解了一些函数基本概念后,回头看看( function(){…} )()和( function (){…} () )这两种立即执行函数的写法,最初我以为是一个括号包裹匿名函数,并后面加个括号立即调用函数,当时不知道为什么要加括号,后来明白,要在函数体后面加括号就能立即调用,则这个函数必须是函数表达式,不能是函数声明。

(function(a){
  console.log(a);  //firebug输出123,使用()运算符
})(123);
 
(function(a){
  console.log(a);  //firebug输出1234,使用()运算符
}(1234));
 
!function(a){
  console.log(a);  //firebug输出12345,使用!运算符
}(12345);
 
+function(a){
  console.log(a);  //firebug输出123456,使用+运算符
}(123456);
 
-function(a){
  console.log(a);  //firebug输出1234567,使用-运算符
}(1234567);
 
var fn=function(a){
  console.log(a);  //firebug输出12345678,使用=运算符
}(12345678)

可以看到输出结果,在function前面加!、+、 -甚至是逗号等到都可以起到函数定义后立即执行的效果,而()、!、+、-、=等运算符,都将函数声明转换成函数表达式,消除了javascript引擎识别函数表达式和函数声明的歧义,告诉javascript引擎这是一个函数表达式,不是函数声明,可以在后面加括号,并立即执行函数的代码。

加括号是最安全的做法,因为!、+、-等运算符还会和函数的返回值进行运算,有时造成不必要的麻烦。

不过这样的写法有什么用呢?

javascript中没用私有作用域的概念,如果在多人开发的项目上,你在全局或局部作用域中声明了一些变量,可能会被其他人不小心用同名的变量给覆盖掉,根据javascript函数作用域链的特性,可以使用这种技术可以模仿一个私有作用域,用匿名函数作为一个“容器”,“容器”内部可以访问外部的变量,而外部环境不能访问“容器”内部的变量,所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突,俗称“匿名包裹器”或“命名空间”。

JQuery使用的就是这种方法,将JQuery代码包裹在( function (window,undefined){…jquery代码…} (window)中,在全局作用域中调用JQuery代码时,可以达到保护JQuery内部变量的作用。

本文属个人理解整理,如有错误之处欢迎指出,文中观点参考于:

《javascript权威指南》、《javascript高级程序设计》

Javascript 相关文章推荐
Javascript计算时间差的函数分享
Jul 04 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
vue的for循环使用方法
Feb 12 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
vue中英文切换实例代码
Jan 21 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 #Javascript
自己封装的javascript事件队列函数版
Jun 12 #Javascript
jquery动态添加删除一行数据示例
Jun 12 #Javascript
checkbox勾选判断代码分析
Jun 11 #Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 #Javascript
js获取日期:昨天今天和明天、后天
Jun 11 #Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 #Javascript
You might like
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
PHP4实际应用经验篇(4)
2006/10/09 PHP
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
PHP7.0版本备注
2015/07/23 PHP
php构造函数与析构函数
2016/04/23 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
使用Python3制作TCP端口扫描器
2017/04/17 Python
Python实现注册登录系统
2017/08/08 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
客服专员岗位职责
2014/02/28 职场文书
年度考核自我鉴定
2014/03/19 职场文书
六年级数学教学反思
2016/02/16 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
详解PyTorch模型保存与加载
2022/04/28 Python
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers