关注前端开发
HTML5、CSS3、Javascript

一家之言:谈谈JavaScript匿名函数

匿名函数的概念大家也许不会陌生,但是我相信下面的内容会打开一些新的思路。

我们知道函数的定义方式有两种:

1 function fn1(){alert(‘fn1 works’);}

2 var fn2=function(){alert(‘fn2 works’);}

这两种方式有什么区别?思考一下…

1 第一种方式定义函数,函数声明过程在整个程序执行之前的预处理就完成了,所以只要处于同一个作用域,就可以访问到,即使在定义之前调用它也可以。

2 第二章方式就是匿名函数,这种方式函数只能按照程序流程执行到定义的那一行代码才被声明,所以只能在定义之后调用它。

举个例子

var fn1;

fn1();//报错

fn1=function(){

fn2();//fn2 works

alert(‘fn1 works’);

return false;

function fn2(){

alert(‘fn2 works’);

}

}

fn1();//fn2 works + fn1 works

我们看到fn2虽然处在return之后,程序流程并没有执行到它,但是它依然可以被使用,反之fn2只有在它被定义之后才会被正常执行。

明白了这个,下面看一看匿名函数在递归里用处

递归就是函数内部调用自己,举个例子

function fn1(n){
return n>2?fn1(n-1)+fn1(n-2):n;
}

当我们想把这个函数赋给其他的对象属性时,就要用到匿名函数,比如

obj1={

fn:function(n){

return n>2?obj1.fn(n-1)+obj1.fn(n-2):n;
}
}
obj2={
fn:obj.fn;
}
这个时候可以正常调用obj2.fn(),但是这里有一个隐患,我们必须保证obj1里的fn不能被覆盖,看下面的例子
obj1={}
obj2.fn();
obj1被清空,执行出错,怎么办,解决办法有很多,自己先想一个…
最容易的想到的是使用this,更改obj1里面fn的定义如下

obj1={

fn:function(n){

return n>2?this.fn(n-1)+this.fn(n-2):n;
}
}
这样即使obj1里的fn被改写也不影响obj2.fn(),但是this,你迷惑吗?
this在JavaScript里面绝对是一个难理解的概念,理解了最好,但是很多时候其实不一定非得用this,这个例子中,我们可以选个给匿名函数添加个名字

obj1={

fn:function fnname(n){

return n>2?fnname(n-1)+fnname(n-2):n;
}
}
我们发现和this的结果一样,但是这就避开了this的混淆视听,而且注意这个函数名只有函数内部可以访问,外部是访问不了的(请私下测试),这样就能避免诸如全局变量的问题。
还有一种解决方案,这个方案是最优雅的,所以我要作为大礼送给大家
我们知道有个arguments对象,这个对象里面有好多好玩的属性和方法,其中一个叫做callee,它的作用是调用函数本身!继续修改上面的例子

obj1={

fn:function(n){

return n>2?arguments.callee(n-1)+arguments.callee(n-2):n;
}
}
这个是目前我发现最优雅的方法,大家有其他更好的方案可以拿来讨论。
匿名函数的讨论先到此为止。

转载请注明出处大前端 » 一家之言:谈谈JavaScript匿名函数

分享: