( 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(){})();的更多相关文章

  1. JavaScript 函数声明,函数表达式,匿名函数的区别,深入理解立即执行函数(function(){…})()

    function fnName(){xxxx}; // 函数声明:使用function关键字声明一个函数,在指定一个函数名. //例如:(正常,因为 提升 了函数声明,函数调用可以在函数声明之前) f ...

  2. 理解javascript中的立即执行函数(function(){})()

    之前看了好多代码,都有用到这种函数的写法,但是都没认真的去想为什么会这样写,今天开始想学习下jquery的源码,发现jquery也是使用这种方式,用(function(window, undefine ...

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

    投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...

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

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

  5. 【转】深入理解javascript中的立即执行函数(function(){…})()

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

  6. js立即执行函数: (function ( ){...})( ) 与 (function ( ){...}( ))

    ( function(){…} )() ( function (){…} () ) 是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达 ...

  7. javascript中的立即执行函数(function(){…})()

    javascript中的立即执行函数(function(){…})() 深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包 ...

  8. JavaScript匿名自执行函数~function(){}

    原博客:https://blog.csdn.net/yaojxing/article/details/72784774 1.匿名函数的常见场景 js中的匿名函数是一种很常见的函数类型,比较常见的场景: ...

  9. 立即执行函数: (function(){...})() 与 (function(){...}()) 有什么区别?

    没有区别. function foo() {...} // 这是定义,Declaration:定义只是让解释器知道其存在,但是不会运行. foo(); // 这是语句,Statement:解释器遇到语 ...

随机推荐

  1. dotweb框架之旅 [一] - HelloWorld

    一直想着,要系统性的写一些dotweb使用的文章,之前拖延了不少时间,今天,下定决定,算是正式的开始,也请大家一起监督. dotweb,是一款追求简约大方的go web框架,正如其github项目主页 ...

  2. vDSP加速的应用

    vDSP 是IOS提供一系列加速处理算法..在优化时可以考虑应用一二... 1.在项目中加入Accelerate.framework库 点开项目属性->Build Phases->Link ...

  3. live555_RTSP连接建立以及请求消息处理过程

    1,RTSP连接的建立过程    RTSPServer类用于构建一个RTSP服务器,该类同时在其内部定义了一个RTSPClientSession类,用于处理单独的客户会话.    首先创建RTSP服务 ...

  4. db2备份还原

    还原步骤:创建好数据库后进入该数据库 .restore db TSMESDB from D:\ICSS\dbData on D:\ICSS\dbData  into TSMESDB redirect. ...

  5. NDK Jni 开发(1)

    1. 学习地址 http://my.oschina.net/lifj/blog/177087 http://www.cnblogs.com/devinzhang/archive/2012/02/29/ ...

  6. 使用Gradle构建Android项目

    阅读目录 Gradle是什么? 环境需求 Gradle基本结构 任务task的执行 基本的构建定制 目录配置 签名配置 代码混淆设置 依赖配置 输出不同配置的应用 生成多个渠道包(以Umeng为例) ...

  7. Software development process

    一.Development process 1.Business/User Requirement 2.Architecture Proposal,Solution Proposal 3.Functi ...

  8. vue 从入门到精通(二)

    上一篇总结了一些vue的理论知识,如果你没看懂的话--那返回去继续去看啊!反正我要开始第二篇了. vue提供了大量的指令,比如:v-if,v-bind,v-on--太多,多写项目,多看API,这里就不 ...

  9. yii2之GridView小部件

    GridView小部件用于展示多条数据的列表.GridView小部件的使用需要数据提供器即yii\data\ActiveDataProvider的实例作为参数,所以 第一步就是要在控制器方法中创建这个 ...

  10. Mysql 用户,权限管理的几点理解。

    前两天项目数据库要移植到mysql,为此临时抓了几天很久没用的mysql. 公司的数据库比较简单,从oracle迁移到mysql很简单,但是,中间的权限管理让我感觉既简单又复杂..简单是因为网上关于m ...