感觉这是js的核心中心又是基本点了,理解后又忘了。然后再来过一遍。
匿名函数:
匿名函数为没有函数名的函数。
匿名函数的创建:
1) var a=function(x){return x}; //即常见的创建函数的方式。
2) (function(x,y){
alert(x+y);
})(2,3);
这里创建了一个匿名函数,在第一个括号内,第二个括号用于调用该匿名函数,并传入参数。
闭包:
在js中使用闭包能大大减少代码量,使代码看上去更加清晰,很重要。
闭包即是函数的嵌套,内层的函数可以使用外层函数的所有变量,即使外层函数已经执行完毕(参考js作用域链)。
function check(){
var str="abc";
setTimeout(function(){alert(str);},1000);
}
check();
setTimeout()里面的函数为一个匿名函数。
check函数是瞬间执行的,在check的函数体内创建了一个变量str,在check执行完毕后str并没有被释放(正常情况是用完就释放的),这是因为setTimeout内的匿名函数存在对str的引用。在1秒后函数体内的匿名函数被执行完毕,str才会被释放。
function Time(x,y){
alert(x+y);
}
function delay(x,y,time){
setTimeout('Time('+x+','+y+')',time);
}
//上面的delay函数可以用闭包的方式来写,如下:
function delay(x,y,time){
setTimeout(
function(){ Time(x,y)}
,time );
}
匿名函数最大的用途是创建闭包,并且可以构建命名空间,以减少全局变量的使用。
var Test={};
(function(){
var addEvent=function(){/*省略了具体实现代码*/};
function removeEvent(){}
Test.addEvent=addEvent;
Test.removeEvent=removeEvent;
})();
在这里,addEvent和removeEvent都是局部变量,通过Test使用它,大大减少了全局变量的使用,增强了网页的安全性。使用此段代码: Test.addEvent(document.getElementById('box'),'click',function(){});
var Test=(function(x,y){
return x+y;
})(2,3);
//也可以写成不要第一个括号的形式,但是第一个括号可以帮助我们阅读,建议保留。
var outer=null;
(function(){
var one=1;
funciton inner(){
one +=1;
alert(one);
}
outer=inner;
})()
outer(); //2
outer(); //3
outer(); //4
变量one是一个局部变量,被定义在一个函数之内,因此外部是不可以访问的。然后创建了inner函数,inner函数可以访问one变量,又将全局变量outer引用了inner,所以三次调用outer会弹出递增的结果。
闭包允许内层函数引用父函数中的变量,但是该变量是最终值。
/**
*<body>
*<ul>
* <li>one</li>
* <li>two</li>
* <li>three</li>
*</ul>
*/
var lists=document.getElementByTagName('li');
for(var i=0,len=lists.length;i<len;i++){
lists[i].onmouseover=function(){
alert(i);
};
}
当塑标移动过每一个li元素时,总是弹出4,而不是希望的下标。原因是当mouseover事件调用监听函数时,首先在匿名函数内部查找是否定义了i,结果是没有定义。因此它会向上查找,查找结果是已经定义了,并且i的值是4,为循环后的值。所以,最终每次弹出的都是4。
解决办法:
1)
var lists=document.getElementsByTagName('li');
for(var i=0,len=lists.length;i<len;i++){
(function(index){
lists[index].onmouseover=function(){alert(index);};
})(i);
}
2)
var lists=document.getElementsByTagName('li');
for(var i=0,len=lists.length;i<len;i++){
lists[i].$$index=i;
lists[i].onmouseover=function(){
alert(this.$$index);
}
}
3)
function eventListener(list,index){
list.onmouseover=function(){
alert(index);
};
}
var lists=document.getElementsByTagName('li');
for(var i=0,len=lists.length;i<len;i++){
eventListener(lists[i];i);
}