深入理解立即执行函数(function(){})();
( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,要理解立即执行函数,需要先理解一些函数的基本概念。
1,函数声明,函数表达式,匿名函数
函数声明:function fnName(){...};使用function关键字声明一个函数,再指定一个函数名,叫函数声明。
函数表达式:var fnName = function(){...};使用function关键字声明一个函数,但未给函数命名,最后将匿名函数赋给一个变量,叫函数表达式。这是最常见的函数表达式语法形式。
匿名函数:function(){...};使用function关键字声明一个函数,但是并没有给函数命名,所有叫匿名函数。(匿名函数属于函数表达式,匿名函数有很多作用,赋予一个变量则创建函数,赋予一个事件则成为事件处理程序或创建闭包)
函数声明和函数表达式不同在于:
1,javascript引擎在解析javascript代码时会函数声明提升(function declaretion hoisting)当前执行环境(作用域)上的函数声明。而函数表达式必须等到Javascript引擎执行到他所在行时,才会从上而下一行一行的解析函数表达式。
2,函数表达式后面可以加括号立即调用函数,函数声明不可以,只能以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(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函数作用域链的特性,可以使用这种技术可以模仿一个私有作用域,用匿名函数作为一个“容器”,“容器”内部可以访问外部的变量,而外部环境不能访问“容器”内部的变量,所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突,俗称“匿名包裹器”或“命名空间”。
JQuery使用的就是这种方法,将JQuery代码包裹在( function (window,undefined){…jquery代码…} (window)中,在全局作用域中调用JQuery代码时,可以达到保护JQuery内部变量的作用。
深入理解立即执行函数(function(){})();的更多相关文章
- JavaScript 函数声明,函数表达式,匿名函数的区别,深入理解立即执行函数(function(){…})()
function fnName(){xxxx}; // 函数声明:使用function关键字声明一个函数,在指定一个函数名. //例如:(正常,因为 提升 了函数声明,函数调用可以在函数声明之前) f ...
- 理解javascript中的立即执行函数(function(){})()
之前看了好多代码,都有用到这种函数的写法,但是都没认真的去想为什么会这样写,今天开始想学习下jquery的源码,发现jquery也是使用这种方式,用(function(window, undefine ...
- 深入理解javascript中的立即执行函数(function(){…})()
投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...
- 深入理解js中的立即执行函数(function(){…})()
javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( f ...
- 【转】深入理解javascript中的立即执行函数(function(){…})()
javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( f ...
- js立即执行函数: (function ( ){...})( ) 与 (function ( ){...}( ))
( function(){…} )() ( function (){…} () ) 是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达 ...
- javascript中的立即执行函数(function(){…})()
javascript中的立即执行函数(function(){…})() 深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包 ...
- JavaScript匿名自执行函数~function(){}
原博客:https://blog.csdn.net/yaojxing/article/details/72784774 1.匿名函数的常见场景 js中的匿名函数是一种很常见的函数类型,比较常见的场景: ...
- 立即执行函数: (function(){...})() 与 (function(){...}()) 有什么区别?
没有区别. function foo() {...} // 这是定义,Declaration:定义只是让解释器知道其存在,但是不会运行. foo(); // 这是语句,Statement:解释器遇到语 ...
随机推荐
- VUE长按事件
PS:在开发中常常会有长按事件的需求,这里我简单的介绍几种长按事件的需求 需求一:长按数字累加或者累减 HTML: <div class="mui-numbox" data- ...
- canvas图表详解系列(5):雷达(面积)图
雷达(面积)图 本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种 ...
- java将map拼接成“参数=值&参数=值”
Java将Map拼接成"参数=值&参数=值" 把一个map的键值对拼接成"参数=值&参数=值"即"username=angusbao& ...
- 【ASP.NET MVC 学习笔记】- 09 Area的使用
本文参考:http://www.cnblogs.com/willick/p/3331519.html 1.ASP.NET MVC允许使用 Area(区域)来组织Web应用程序,这对于大的工程非常有用, ...
- [Java第一课]环境变量的配置以及eclipse一些常用快捷键
1.环境变量的配置(这里对xp系统电脑来说:) 首先安装jdk软件. 然后在我的电脑(右键)-->属性-->高级-->环境变量-->系统变量(注意)-->新建(新建两个p ...
- Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default-compile) 解决方案
1.命令行用maven编译项目失败,提示 Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compi ...
- Android Studio常见问题解决
1.Error:Execution failed for task ':XXXX:processDebugManifest'. > Manifest merger failed with mul ...
- 使用prettytable美化python的print输出
经常碰到需要将一些数据用表格形式输出来.自己手动写太麻烦. 用prettytable能很好解决这个问题. ...(未完)
- oracle数据库无监听程序
在电脑---服务---启动oracle tns 如果还是出现错误的话,找到Net Manager,将网络的ip监听删除,将本机的主机名配好,即可打开tns服务
- 学习UML --用例图
用例图用于描述系统提供的系列功能.使用用例图的主要目的是帮助开发团队以一种可视化的方式理解系统的功能需求.用例图对系统的实现不做任何说明,仅仅是系统功能的描述. 用例图主要在需求分析阶段使用,用于描述 ...