Javascript 自动执行函数（立即调用函数）

开头：各种原因总结一下javascript中的自动执行函数（立即调用函数）的一些方法，正文如下

在Javascript中，任何function在执行的时候都会创建一个执行上下文，因为function声明变量和function有可能只在该function内部，这个上下文，在调用function的时候，提供一些简单的方式来创建自由变量或私有子function。

eg:

// 由于该function里返回了另外一个function，其中这个function可以访问自由变量i
// 所有说，这个内部的function实际上是有权限可以调用内部的对象。
function makeCounter() {
// 只能在makeCounter内部访问i
 var i = 0;
return function () {
console.log(++i);
};
}
// 注意，counter和counter2是不同的实例，分别有自己范围内的i。
var counter = makeCounter();
counter(); // logs: 1
counter(); // logs: 2
var counter2 = makeCounter();
counter2(); // logs: 1
counter2(); // logs: 2
alert(i); // 引用错误：i没有defind（因为i是存在于makeCounter内部）。


正文核心


1、Javascript方法：



       在声明类似function foo(){}或var foo = function(){}函数的时候，通过在后面加个括弧就可以实现自执行，例如foo()，看代码：



// 因为想下面第一个声明的function可以在后面加一个括弧()就可以自己执行了，比如foo()，
// 因为foo仅仅是function() { /* code */ }这个表达式的一个引用
var foo = function(){ /* code */ }
// ...是不是意味着后面加个括弧都可以自动执行？
function(){ /* code */ }(); // SyntaxError: Unexpected token (


上述代码，如果甚至运行，第2个代码会出错，因为在解析器解析全局的function或者function内部function关键字的时候，默认是认为function声明，而不是function表达式，如果你不显示告诉编译器，它默认会声明成一个缺少名字的function，并且抛出一个语法错误信息，因为function声明需要一个名字。

       有趣的是，即便你为上面那个错误的代码加上一个名字，他也会提示语法错误，只不过和上面的原因不一样。在一个表达式后面加上括号()，该表达式会立即执行，但是在一个语句后面加上括号()，是完全不一样的意思，他的只是分组操作符。


// 下面这个function在语法上是没问题的，但是依然只是一个语句


// 加上括号()以后依然会报错，因为分组操作符需要包含表达式  


 function foo(){ /* code */ }(); // SyntaxError: Unexpected token )  


// 但是如果你在括弧()里传入一个表达式，将不会有异常抛出


// 但是foo函数依然不会执行 


function foo(){ /* code */ }( 1 );  


// 因为它完全等价于下面这个代码，一个function声明后面，又声明了一个毫无关系的表达式：  


function foo(){ /* code */ } 


( 1 );


你可以访问ECMA-262-3 in detail. Chapter 5. Functions 获取进一步的信息。


要解决上述问题，非常简单，我们只需要用大括弧将代码的代码全部括住就行了，因为JavaScript里括弧()里面不能包含语句，所以在这一点上，解析器在解析function关键字的时候，会将相应的代码解析成function表达式，而不是function声明。


// 下面2个括弧()都会立即执行  


(function () { /* code */ } ()); // 推荐使用这个 


(function () { /* code */ })(); // 但是这个也是可以用的  


// 由于括弧()和JS的&&，异或，逗号等操作符是在函数表达式和函数声明上消除歧义的 


// 所以一旦解析器知道其中一个已经是表达式了，其它的也都默认为表达式了 


// 不过，请注意下一章节的内容解释  


var i = function () { return 10; } (); 


true && function () { /* code */ } ();


0, function () { /* code */ } ();




// 如果你不在意返回值，或者不怕难以阅读 


// 你甚至可以在function前面加一元操作符号  


!function () { /* code */ } (); 


~function () { /* code */ } (); 


-function () { /* code */ } (); 


+function () { /* code */ } ();


// 还有一个情况，使用new关键字,也可以用，但我不确定它的效率 


// http://twitter.com/kuvos/status/18209252090847232  


new function () { /* code */ } 


new function () { /* code */ } () // 如果需要传递参数，只需要加上括弧()


上面所说的括弧是消除歧义的，其实压根就没必要，因为括弧本来内部本来期望的就是函数表达式，但是我们依然用它，主要是为了方便开发人员阅读，当你让这些已经自动执行的表达式赋值给一个变量的时候，我们看到开头有括弧(，很快就能明白，而不需要将代码拉到最后看看到底有没有加括弧。


用闭包保存状态


和普通function执行的时候传参数一样，自执行的函数表达式也可以这么传参，因为闭包直接可以引用传入的这些参数，利用这些被lock住的传入参数，自执行函数表达式可以有效地保存状态。


// 这个代码是错误的，因为变量i从来就没背locked住 


// 相反，当循环执行以后，我们在点击的时候i才获得数值 


// 因为这个时候i操真正获得值 


// 所以说无论点击那个连接，最终显示的都是I am link #10（如果有10个a元素的话）  var elems = document.getElementsByTagName(‘a‘);  


for (var i = 0; i < elems.length; i++) { elems[i].addEventListener(‘click‘, function (e) { e.preventDefault();  


alert(‘I am link #‘ + i); }, ‘false‘); 


}


// 这个是可以用的，因为他在自执行函数表达式闭包内部 


// i的值作为locked的索引存在，在循环执行结束以后，尽管最后i的值变成了a元素总数


// 但闭包内部的lockedInIndex值是没有改变，因为他已经执行完毕了 


// 所以当点击连接的时候，结果是正确的  


var elems = document.getElementsByTagName(‘a‘); 


for (var i = 0; i < elems.length; i++) {  


(function (lockedInIndex) { elems[i].addEventListener(‘click‘, function (e) { e.preventDefault();  


alert(‘I am link #‘ + lockedInIndex); }, ‘false‘); 


})(i); }  


// 你也可以像下面这样应用，在处理函数那里使用自执行函数表达式 


// 而不是在addEventListener外部 


// 但是相对来说，上面的代码更具可读性  


var elems = document.getElementsByTagName(‘a‘);  


for (var i = 0; i < elems.length; i++) { elems[i].addEventListener(‘click‘, (function (lockedInIndex) { return function (e) {  


 e.preventDefault();  


 alert(‘I am link #‘ + lockedInIndex);  


 };  


})(i), ‘false‘);  


}


其实，上面2个例子里的lockedInIndex变量，也可以换成i，因为和外面的i不在一个作用于，所以不会出现问题，这也是匿名函数+闭包的威力。

自执行匿名函数和立即执行的函数表达式区别

          在这篇帖子里，我们一直叫自执行函数，确切的说是自执行匿名函数（Self-executing anonymous function），但英文原文作者一直倡议使用立即调用的函数表达式（Immediately-Invoked Function Expression）这一名称，作者又举了一堆例子来解释，好吧，我们来看看：




// 这是一个自执行的函数，函数内部执行自身，递归 


function foo() { foo(); } 


// 这是一个自执行的匿名函数，因为没有标示名称 


// 必须使用arguments.callee属性来执行自己 


var foo = function () { arguments.callee(); };  


// 这可能也是一个自执行的匿名函数，仅仅是foo标示名称引用它自身 


// 如果你将foo改变成其它的，你将得到一个used-to-self-execute匿名函数 


var foo = function () { foo(); };  


// 有些人叫这个是自执行的匿名函数（即便它不是），因为它没有调用自身，它只是立即执行而已。 (function () { /* code */ } ());  


// 为函数表达式添加一个标示名称，可以方便Debug 


// 但一定命名了，这个函数就不再是匿名的了 


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


// 立即调用的函数表达式（IIFE）也可以自执行，不过可能不常用罢了 


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


// 另外，下面的代码在黑莓5里执行会出错，因为在一个命名的函数表达式里，他的名称是undefined 


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



希望这里的一些例子，可以让大家明白，什么叫自执行，什么叫立即调用。


注意：arguments.callee在ECMAScript 5 strict mode里被废弃了，所以在这个模式下，其实是不能用的。


在JS中最简单的调用方式，直接写到html的body标签里面：



 <body onload="myfunction()">

 <html> <body onload="func1();func2();func3();"> </body> </html> 

在JS中调用方式： 


  <script type="text/javascript">


　　 function myfun()　


 { 　　 alert("this window.onload"); 　　} 　　/*用window.onload调用myfun()*/


    window.onload = myfun;//不要括号


 </script>


 <script type="text/javascript">


    window.onload=function(){


      func1();


      func2();


     func3(); }


 </script>


2、JQ方法


1)整个页面的document全部加载完成以后执行。不幸的这种方式不仅要求页面的DOM

tree全部加载完成，而且要求所有的外部图片和资源全部加载完成。更不幸的是，如果外部资源，例如图片需要很长时间来加载，那么这个js方法执行感觉就比较慢了。也就是说这是一种最严谨的页面加载完再执行方法的方法。

window.onload =function() { $("table tr:nth-child(even)").addClass("even"); //这个是jquery代码 };


2)仅只需要加载所有的DOM结构，在浏览器把所有的HTML放入DOM tree之前就执行方法。包括在加载外部图片和资源之前。

$(document).ready(function() { $("table tr:nth-child(even)").addClass("even"); //任何需要执行的js特效 });


3)还有一种简写方式

$(function() { $("table tr:nth-child(even)").addClass("even"); //任何需要执行的js特效 });




参考：http://www.jb51.net/article/81724.htm
     http://blog.csdn.net/limlimlim/article/details/9198111


http://www.cnblogs.com/ayning/p/4113314.html














				


				
时间： 2024-10-06 23:05:16 

		


		


	

	
	

		


		
Javascript 自动执行函数（立即调用函数）的相关文章


						

		

			

                javascript学习笔记（二）：定义函数、调用函数、参数、返回值、局部和全局变量
			

		

		

									

				定义函数.调用函数.参数.返回值 关键字function定义函数,格式如下: function 函数名(){ 函数体 } 调用函数.参数.返回值的规则和c语言规则类似. 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta chaset="UTF-8"> 5 <title></title> 6 </head> 7 <body			

		

	

				

		

			

                引用函数，调用函数，揭秘
			

		

		

									

				问题引入:在看<Jquery基础教程>第四版的时,P34页有这样一段话 引用函数与调用函数 这里在将函数指定为处理程序时,省略了后面的圆括号,只使用了函数名.如果带着圆括号,函数会被立即调用:没有圆括号,函数名就只是函数的标识符或函数的引用,可以用于在将来再调用函数. 这引发了我对于绑定事件方式的思考.我们都知道为元素绑定事件处理程序的时,内联方式要这样写 <body onload="doSomething();">...</body> ,或者jav			

		

	

				

		

			

                第十六周 【项目3-用函数指针调用函数】
			

		

		

									

				问题及代码: /* *Copyright (c) 2014,烟台大学计算机学院 *ALL right reserved *文件名:用函数指针调用函数 *作者:童宇 *完成日期:2014年12月16日 *版本号v1.0 *问题描述:用函数指针调用函数 *输入描述: *程序输出:用函数指针调用函数 */ #include <iostream> using namespace std; void eat(); void sleep(); void hitdoudou(); void run(void			

		

	

						

		

			

                总结javascript中的全局变量和局部变量的区别以及声明函数和调用函数的区别
			

		

		

									

				<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"/> <title></title> <script src="../js/jquery-1.10.2.js"></script> <script> // 1 i为全局变量 输出全局变量 function myName(			

		

	

				

		

			

                Python基础笔记：函数：调用函数、定义函数、函数的参数、递归函数
			

		

		

									

				一.定义一个求二元一次方程的根的函数 #Sublime Text import math def ee(a,b,c): delta=b*b-4*a*c if delta<0: return 'null' else: m=math.sqrt(delta) nx=(-b+m)/2/a ny=(-b-m)/2/a return nx,ny #python解释器 >>> from hello import ee #声明调用py文件中所定义的函数ee >>> ee(1,0,			

		

	

				

		

			

                用函数指针调用函数
			

		

		

									

				#include <stdio.h> int main(void){     int n = 6;     int square(int num);      int (*fptr)(int);  //声明函数指针     fptr = square;   //初始化函数指针     printf("%d square is %d.\n", n, fptr(n));     return (0);  }  int square(int num){     return (n			

		

	

				

		

			

                根据函数名称---函数指针--调用函数
			

		

		

									

				type TForm1 = class(TForm) Button1: TButton; procedure Button1Click(Sender: TObject) ; procedure CallMeByName(Sender: TObject) ; private procedure ExecMethod(OnObject: TObject; MethodName: string) ; end; var Form1: TForm1; type TExec = procedure of o			

		

	

				

		

			

                JavaScript中函数的调用
			

		

		

									

				JavaScript中函数的调用 制作人:全心全意 在JavaScript中,函数定义后并不会自动执行,要执行一个函数需要在特定的位置调用该函数,调用函数需要创建调用语句,调用语句包含函数名称和参数. 函数的简单调用 函数的定义语句通常被放在HTML文件的<HEAD>段中,而函数的调用语句通常被放在<BODY>段中,如果在函数定义之前调用函数,执行将会出错. 函数的简单调用基本语法格式如下: <html> <head> <meta charset=&q			

		

	

				

		

			

                UIAutomation调用计算器模拟自动执行
			

		

		

									

				UIAutomation和WPF UIAutomation是微软从Windows Vista开始推出的一套全新UI自动化测试技术, 简称UIA.在最新的Windows SDK中,UIA和MSAA等其它支持UI自动化技术的组件放在一起发布,叫做Windows Automation API. 和前面的介绍相比,我倾向于认为UIA是一项自动化测试“技术”,而MSAA和Win32 API只是实现自动化测试的两种“方法”.这里区分“技术”和 “方法”的原因是, 一项“技术”往往有独立的模型,体贴的开发接口