js中立即执行

( 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内部变量的作用。

时间: 2024-10-14 14:02:47

js中立即执行的相关文章

进阶学习js中的执行上下文

在js中的执行上下文,菜鸟入门基础 这篇文章中我们简单的讲解了js中的上下文,今天我们就更进一步的讲解js中的执行上下文. 1.当遇到变量名和函数名相同的问题. var a = 10; function a(){ console.log(1); } a(); //报错 如果你觉得函数a会覆盖变量a那你肯定是js的新朋友,为什么这里会报错呢?我记得我在基础的执行上下文文章中说过变量声明提前的概念,对这里就是因为这个原因,但是在上面一篇文章中还有一个问题我没有去讲. 那就是函数的声明比变量的声明顺序

javascript--函数的声明及调用/JS中代码执行顺序

[函数的声明及调用] 1.函数声明格式: function 函数名(参数1,参数2,参数3--){ //函数体 return 结果: } 函数调用的格式: 函数名(参数1的值,参数2的值,--): 事件调用:事件名=函数名(): 2.函数声明的几点强调: ① 函数的声明,必须符合小驼峰法则(首字母小写,之后每个单词首字母大写): ② 参数的列表,可以有参数,可以无参数.分别称为有参函数,无参函数: ③ 声明函数时的参数列表,称为"形参列表"(变量的名): 调用函数时的参数列表,称为&q

js中的执行环境及作用域

最近在面试时被问到了对作用域链的理解,感觉当时回答的不是很好,今天就来说说js中的作用域链吧. 首先来说说js中的执行环境,所谓执行环境(有时也称环境)它是JavaScript中最为重要的一个概念.执行环境定义了变量或函数有权访问的其他数据 ,决定了它们各自的行为.而每个执行环境都有一个与之相关的变量对象,环境中定义的所有变量和函数都保存在这个对象中. 理解了执行环境,现在就看看什么是作用域链吧.每个函数都有自己的执行环境,当代码在执行环境中执行时,就会创建变量对象的作用域链.作用域链保证了对执

关于js中立即执行的匿名函数写法

1 /*最流行的写法*/ 2 (function() { 3 alert("run!") 4 })(); 5 6 /* !号可以有1~正无穷个,所以这一种就可以衍生无数种方式 */ 7 !!!(function() { 8 alert("run!") 9 })(); 10 11 (function() { 12 alert("run!") 13 }).call(); 14 15 (function() { 16 alert("run!&

浅谈js中的执行环境和执行环境对象

什么是js的"执行环境",每当函数被调用的时候,就会产生一个新的执行环境,它是运行中的函数的意思,比方说运动员在奔跑的环境中,我们可以把运动员在奔跑的环境中,说成奔跑中的运动员,以此类推说成运行中的函数,行话叫”执行环境“. 下面我们就以一个例子进行分析执行环境对象,以下是执行环境对象的第一轮 以上的这个参数和函数都已被声明和赋值,并且局部变量已被声明,这个就是第一轮,接下来就是要执行第二轮 由于在执行环境中可以调用函数,其中会有很多的深度,其中又会设计到很多比较复杂的函数调用以及作用

js中自执行函数(function(){})()和(function(){}())区别

方式一,调用函数,得到返回值.强制函数直接量执行再返回一个引用,引用在去调用执行方式二,调用函数,得到返回值.强制运算符使函数调用执行(function(){})(); 是 把函数当作表达式解析,然后执行解析后的函数相当于 var a = function(){}; a(); a得到的是函数(function(){}()); 是把函数表达式和执行当作语句直接执行.相当于 var a = function(){}(); a得到的是结果最终结果是一样的.()只是起了 自执行的作用和 () 一样的还有

JS中的自执行函数

本来规划的是2013年,狠狠的将JS学习下,谁知计划赶不上变化,计划泡汤了.13年的我对JS来说可以说是属于跟风,对它的理解和认识也仅仅是皮毛而已,也是因为要完成<ArcGIS API for JavaScipt开发教程>而临阵磨枪. 在接触JS一段时间后,觉得还是比较灵活的,灵活的前提是要更深入的了解,就像两个陌生的人,相处的时间长了,了解的时间长了,难免会产生感情一样.对于JS也开始产生了感情,这种感情体现在工作中,体现在周围的环境中. 目前很多开发者纷纷加入JS的阵营,看来这已经不是跟风

JS中的循环结构、循环嵌套以及函数介绍

[循环结构的步骤]    *①声明循环变量    *②判断循环条件    *③执行循环体(while的{}中的所有代码)操作     *④更新循环变量    *     * 然后,循环执行②③④    *     *     * [JS中循环条件支持的数据类型]    * ①boolean:true 真     false   假    * ②string: 非空字符串为真       空字符串为假    * ③null/NaN/undefined:  全为假    * ④object:全为真 

JS中的函数、Bom、DOM及JS事件

本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的声明及调用] 1.函数声明的格式: function 函数名(参数1,参数2,参数3,--){//函数体 return 结果; } >>>函数的调用格式: 直接调用:函数调用的格式:函数名(参数一的值,参数二的值,--): 事件调用:事件名=函数名( ); 2.函数声明的几点强调: ①函数名