在JavaScript中的初始化函数和它是如何工作的

我经常看到下面的代码:

(function () { // init part })(); 

但是我永远无法理解它是如何工作的。 我发现最后的括号特别混乱。 有人可以解释它是如何在执行上下文(EC)和variables对象(VO)的方面?

该模式将创build一个新的执行上下文(EC),其中任何局部variables对象(VO)将存活,并将在EC退出时同样死亡。 这一生唯一的例外是成为封闭的一部分的VO。

请注意,JavaScript没有神奇的“初始化”function。 你可能会把这个模式和这样的模式联系起来,因为大多数任何自尊的JS库(jQuery,YUI等)都会这样做,以至于它们不会污染全局的NS,而不是他们所需要的。

示范:

 var x = 1; // global VO (function(){ var x = 2; // local VO })(); x == 1; // global VO, unchanged by the local VO 

第二组“括号”(实际上称为parens或一组括号)只是简单地调用直接在它之前的函数expression式(由前面的括号集定义)。

我通常向人们解释的方式是展示它与其他JavaScript模式的相似之处。

首先,你应该知道有两种方法可以声明一个函数(实际上,至less有五个函数,但这是两个主要的罪魁祸首):

function foo() {/*code*/}

var foo = function() {/*code*/};

即使这个结构看起来很奇怪,你也可能在附加事件时一直使用它:

window.onload=function(){/*code*/};

你应该注意到第二种forms与常规variables声明没有多大区别:

 var bar = 5; var baz = 'some string'; var foo = function() {/*code*/}; 

但是在JavaScript中,你总是可以直接或通过一个variables来使用一个值。 如果bar5 ,那么接下来的两个语句是等价的:

 var myVal = bar * 100; // use 'bar' var myVal = 5 * 100; // don't use 'bar' 

那么,如果你可以自己使用5 ,为什么不能自己使用function() {\*code*\} ? 其实你可以。 这就是所谓的匿名函数。 所以这两个例子也是相同的:

 var foo = function() {/*code*/}; // use 'foo' foo(); (function(){/*code*/}()); // don't use 'foo' 

你应该看到的唯一区别是在额外的括号内。 这只是因为如果你用关键字function开始一行,parsing器会认为你正在使用这个答案顶部的第一个模式声明一个函数,并抛出一个语法错误exception。 所以把你的整个匿名函数包装在一对大括号中,问题就消失了。

换句话说,以下三个陈述是有效的:

 5; // pointless and stupid 'some string'; // pointless and stupid (function(){/*code*/}()); // wonderfully powerful 

该代码创build一个匿名函数,然后立即运行它。 如同:

 var temp = function() { // init part } temp(); 

这个构造的目的是为函数内部的代码创build一个范围。 你可以在范围内声明variables和函数,这些variables在本地范围内。 这样,他们不会混淆全球范围,从而最大限度地减less与其他脚本冲突的风险。

我不敢相信没有人回答这个问题!

最后一组括号用于将parameter passing给匿名问题。 所以,下面的例子创build一个函数,然后用x = 5和y = 8运行它

 (function(x,y){ //code here })(5,8) 

这似乎不是很有用,但它有它的位置。 我见过的最常见的是

 (function($){ //code here })(jQuery) 

这允许jQuery处于兼容模式,但是您可以在匿名函数中将其引用为“$”。

自我调用匿名函数(SIAF)

即使DOM没有完全准备好,自我调用函数也会立即运行。

jQuery document.ready vs自我调用匿名函数

简单地说,你可以理解,每当页面加载时,通过这第二对括号()函数就会调用default.We不需要调用函数。它被称为匿名函数。

 (function(a,b){ //Do your code here })(1,2); 

它和…一样

 var test = function(x,y) { // Do your code here } test(1,2); 

它被称为立即调用函数expression式(IIFE)。 主要与JavaScriptclosures概念相关联。 主要用途是在全局variables更改之前运行该函数,以便保持代码的预期行为。