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/18209252090847232new 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/9198111http://www.cnblogs.com/ayning/p/4113314.html
Javascript 自动执行函数(立即调用函数)的更多相关文章
- javascript学习笔记(二):定义函数、调用函数、参数、返回值、局部和全局变量
定义函数.调用函数.参数.返回值 关键字function定义函数,格式如下: function 函数名(){ 函数体 } 调用函数.参数.返回值的规则和c语言规则类似. <!DOCTYPE ht ...
- 总结javascript中的全局变量和局部变量的区别以及声明函数和调用函数的区别
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8&quo ...
- JavaScript setInterval(定时/延时调用函数)
setInterval是一个实现定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval方法会不停地调用函数,直到 clearInterval被调用或窗口被关闭. 由 ...
- Javascript知识点:IIFE - 立即调用函数
Immediately-invoked Function Expression(IIFE,立即调用函数),简单的理解就是定义完成函数之后立即执行.因此有时候也会被称为“自执行的匿名函数”(self-e ...
- js笔记(4)--关于在window.onload()里面定义函数,调用函数无法执行~
由于本人学习js学不久,所以,今天刚好遇到了一个关于在window.onload里面定义函数,然后在html里面调用函数时出现错误.具体见下面: <!DOCTYPE html> <h ...
- Python基础笔记:函数:调用函数、定义函数、函数的参数、递归函数
一.定义一个求二元一次方程的根的函数 #Sublime Text import math def ee(a,b,c): delta=b*b-4*a*c if delta<0: return 'n ...
- keil 中用函数指针调用函数的参数限制
NSIC中,通过函数指针调用的函数的参数的个数没有限制,但是KeilC对此有限制,至多3个参数.因为,KeilC编译时,无法通过函数指针找到该函数的局部数据段,也就无法通过局部数据段传递参数,只能通过 ...
- python函数之调用函数
调用函数 python中内置了许多函数,我们可以直接调用,但需要注意的是参数的个数和类型一定要和函数一致,有时候不一致时,可以进行数据类型转换 1.abs()函数[求绝对值的函数,只接受一个参数] # ...
- javascript replace正则替换时调用函数替换的使用
以下函数将替换英文方式下的单引号和双引号,当然change函数编写决定了你要替换什么? String.prototype.repSpecChar=function() { ...
随机推荐
- Pycharm2018的激活方法或破解方法
1.授权服务器激活 优点:方便快捷 缺点:激活的人数多了就容易被封杀,所以可能经常需要去激活 选择License server激活,然后填入: idea.qmanga.com或http://xidea ...
- 用scp这个命令来通过ssh传输文件
小结: 1. upload files 到 ssh 服务器 localhost $ scp localfile root@172.20.34.**:~/remotepath 2. 从 ssh 服务器d ...
- 【牛客网71E】 组一组(差分约束,拆位)
传送门 NowCoder Solution 考虑一下看到这种区间或与区间与的关系,拆一下位. 令\(s_i\)表示前缀和,则: 那么如果现在考虑到了第\(i\)为,有如下4种可能: \(opt=1\) ...
- 视频下载四大神器—如何下载优酷/爱奇艺/腾讯/B站超清无水印视频
视频下载四大神器—如何下载优酷/爱奇艺/腾讯/B站超清无水印视频 2018-07-11 | 标签»下载, 下载工具, 视频 又是视频下载,老生常谈的话题.阿刚同学已在乐软博客多次与大家分享推荐 ...
- 如何完美回答面试官问的Mybatis初始化原理!!!
前言 对于任何框架而言,在使用前都要进行一系列的初始化,MyBatis也不例外.本章将通过以下几点详细介绍MyBatis的初始化过程. MyBatis的初始化做了什么 MyBatis基于XML配置文件 ...
- LDA-线性判别分析(四)其他几个相关问题
本来是要调研 Latent Dirichlet Allocation 的那个 LDA 的, 没想到查到很多关于 Linear Discriminant Analysis 这个 LDA 的资料.初步看了 ...
- Web渗透:PHP字符编码绕过漏洞总结
其实这东西国内少数黑客早已知道,只不过没有共享公布而已.有些人是不愿共享,宁愿烂在地里,另外的一些则是用来牟利. 该漏洞最早2006年被国外用来讨论数据库字符集设为GBK时,0xbf27本身不是一个有 ...
- [Java初探外篇]__关于正则表达式
正则表达式通常用于判断语句之中,用来检测一段字符串是否满足某一个格式.在日常生活中被广泛的用于各种用户输入信息的检测上. 而正则表达式实际上是一些具有特殊意义的字符序列.通过这些特殊字符构成的特殊序列 ...
- 从零开始学 Web 之 CSS3(一)CSS3概述,选择器
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 分布式系统CAP理论以及注册中心选择
CAP定理:指的是在一个分布式系统中,Consistency(一致性). Availability(可用性).Partition tolerance(分区容错性),三者不可同时获得. 一致性(C-数据 ...