(function ( ){})( ) 与 (function ( ){}( )) 有什么区别?

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

转自:http://www.jb51.net/article/75089.htm

这篇文章主要介绍了js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别,需要的朋友可以参考下

没有区别。

你需要明白 IIFE 的原理,我简单说一下:

复制代码 代码如下:

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

IIFE 并非必须,传统一点可以这么写:

复制代码 代码如下:

function foo() {...}
foo();

那么为什么要 IIFE?
1.传统的方法啰嗦,定义和执行分开写;
2.传统的方法直接污染全局命名空间(浏览器里的 global 对象,如 window)

于是,开发者们想找一个可以解决以上问题的写法。那么像下面这么写行不行呢?

function foo(...){}();

当然是不能,但是为什么呢?因为 function foo(...){} 这个部分只是一个声明,对于解释器来说,就好像你写了一个字符串
"function foo(...){}",它需要使用解析函数,比如 eval() 来执行它才可以。所以把 ()
直接放在声明后面是不会执行,这是错误的语法。

如何把它变得正确?说起来也简单,只要把 声明 变成 表达式(Expression) 就可以了。

实际上转变表达式的办法还是很多的,最常见的办法是把函数声明用一对 () 包裹起来,于是就变成了:

复制代码 代码如下:

(function foo() {...})    // 这里是故意换行,实际上可以和下面的括号连起来
();

这就等价于:

复制代码 代码如下:

var foo = function () {...};    // 这就不是定义,而是表达式了。
foo();

但是之前我们说不行的那个写法,其实也可以直接用括号包起来,这也是一种等价的表达式:

(function foo(){...}());

所以你问有没有区别?很简单:木有~

另外,刚才说过转变表达式的方式很多,的确还有很多别的写法,比如:

!function foo() {...}();

或者

+function foo() {...}();

这些都可以。

我个人挺偏爱用 void 来转变表达式,因为此关键字不会有返回值。不过这一点真的没有什么要紧的,就当我“龟毛”好了……

复制代码 代码如下:

void function () {
    // 这里是真正需要的代码
}();

OK,所谓不去污染全局命名空间,是因为 IIFE 创建了一个新的函数作用域,你真正的业务代码被封装在其中,自然就不会触碰到全局对象了。如果你需要全局对象,那就 pass 给 IIFE:

复制代码 代码如下:

void function (global) {
    // 在这里,global 就是全局对象了
}(this)    // 在浏览器里,this 就是 window 对象

我在这里写过一个系列,其中一篇讲作用域和命名提升的,里面的知识点对理解 IIFE 有帮助,有兴趣的话可以继续深入阅读:http://www.jb51.net/article/75090.htm

方式一,调用函数,得到返回值。强制函数直接量执行再返回一个引用,引用在去调用执行
方式二,调用函数,得到返回值。强制运算符使函数调用执行
(function(){})(); 是 把函数当作表达式解析,然后执行解析后的函数
相当于 var a = function(){}; a(); a得到的是函数
(function(){}()); 是把函数表达式和执行当作语句直接执行、
相当于 var a = function(){}(); a得到的是结果
最终结果是一样的、
()只是起了 自执行的作用
和 () 一样的还有很多
比如 +function (){}
这个等于 (function (){}) 一般用(function (){}) 还有个作用,就是 避免全局变量

时间: 2024-07-30 17:52:49

(function ( ){})( ) 与 (function ( ){}( )) 有什么区别?的相关文章

从var func=function 和 function func()区别谈Javascript的预解析机制

var func=function 和 function func()在意义上没有任何不同,但其解释优先级不同:后者会先于同一语句级的其他语句. 即: { var k = xx(); function xx(){return 5;} } 不会出错,而 { var k = xx(); var xx = function(){return 5;} } 则会出错. 为什么会这样呢?这就要引出javascript中的预解析机制来解释了. JavaScript解析过程分为两个阶段,一个是编译阶段,另外一个

jQuery(function(){})与(function(){})(jQuery)的区别

开发jQuery插件时总结的一些经验分享一下. 一.先看 jQuery(function(){ }); 全写为 jQuery(document).ready(function(){       }); 意义为在DOM加载完毕后执行了ready()方法. 二.再看 (function(){ })(jQuery): 其实际上是执行()(para)匿名方法,只不过是传递了jQuery对象. 三.总结 jQuery(function(){ });用于存放操作DOM对象的代码,执行其中代码时DOM对象已存

浅析jQuery(function(){})与(function(){})(jQuery)之间的区别

本篇文章主要是对jQuery(function(){})与(function(){})(jQuery)之间的区别进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 Jquery是优秀的Javascrīpt框架.我们现在来讨论下在 Jquery 中两个页面载入后执行的函数. $(document).ready(function(){  // 在这里写你的代码...});在DOM加载完成时运行的代码 可以简写成 jQuery(function(){ }); (function($) {})(j

浅谈jQuery的$(function(){})和(function($){}(jQuery))的区别

一:$(function(){}) $(function(){})是$(document).ready(function(){})的简写,或者$().ready(function(){}),会在DOM加载完成之后执行. 与onload的区别在于:ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件):而onload,指示页面包含图片等文件在内的所有元素都加载完成. 二:(function($){}(jQuery)) (function($){}(jQuery))是立即执行函数:相当于

function,new function,Function,new Function 之间的区别

测试一: var fud01 = function()  { var temp = 100; this.temp = 200; return temp + this.temp; } alert(typeof(fud01)); alert(fud01()); 运行结果: function 300 最普通的function使用方式,定一个JavaScript函数.在大扩号内的变量作用域中,this指代fud01的所有者. 测试二: var fud02 = new function() { var t

$(function(){})与 (function(){})() (function($){})() 的区别

1. $(function(){ }) 或 jQuery(function(){ }) 此函数也可以写成 jQuery(function(){ }), 用于存放操作DOM对象的代码,执行其中代码时DOM对象已存在.不可用于存放开发插件的代码,因为jQuery对象没有得到传递,外部通过jQuery.method也调用不了其中的方法(函数). 2. (function(){})() 或  function(){ })(jQuery) 此函数也可以写成   function(){ })(jQuery)

jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解 ----转载

1.(function($) {-})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即: (function(arg){-})(param) 这就相当于定义了一个参数为arg的匿名函数,并且将param作为参数来调用这个匿名函数 而(function($){-})(jquery)则是一样的,之所以只在形参使用$,是为了不与其

Javacript中(function(){})() 与 (function(){}()) 区别 {转}

这个问题可以从不同的角度来看,但从结果上来说 :他们是一样的.首先,如果从AST(抽象语法树)的角度来看,两者的AST是一模一样的,最终结果都是一次函数调用.因此,就解析器产生的结果论而言,两者是没有区别的. 其次 ,从作用上看,前文已经说了,两者的作用都是创建一个函数并调用之.那么为什么要创建一个函数并立即调用呢,我想大多数是因为javascript的代码默认在全局环境下执行,在此声明的所有变量都会变成全局变量,这很容易导致全局对象的污染.因此我们不得不找一个办法来隔离这些变量,而函数正好会创

【转】jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解

1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…}这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即:(function(arg){…})(param)这就相当于定义了一个参数为arg的匿名函数,并且将param作为参数来调用这个匿名函数 而(function($){…})(jQuery)则是一样的,之所以只在形参使用$,是为了不与其他库冲