关注前端开发
关注用户体验

一家之言:谈谈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;
}
}
这个是目前我发现最优雅的方法,大家有其他更好的方案可以拿来讨论。
匿名函数的讨论先到此为止。
赞(0)
未经允许不得转载:大前端 » 一家之言:谈谈JavaScript匿名函数
分享到: 更多 (0)

评论 8

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #7

    After looking at a number of the blog articles on your blog, I really like your way of writing a blog. I bookmarked it to my bookmark site list and will be checking back in the near future. Please visit my web site as well and tell me your opinion.

    Apex Legends Season 12个月前 (03-31)回复
  2. #6

    function fn1(){alert(‘fn1 works’);} //这是函数声明
    var fn2=function(){alert(‘fn2 works’);} //这是函数表达式
    所谓的匿名函数应该是是类似这样的吧!
    (function(){}()); 外部无法访问!

    3img6年前 (2013-10-28)回复
  3. #5

    从国外大神儿那边借鉴来的吧

    227年前 (2012-09-27)回复
  4. #4

    虽说我不是js达人 但从语言来说 这篇文章的主人 都不合格

    树残由尔8年前 (2011-08-16)回复
    • 赞同

      祥子6年前 (2013-08-05)回复
  5. #3
    1849年前 (2010-09-06)回复
  6. #2

    @浩子: [:09]

    小79年前 (2010-06-23)回复
  7. #1

    [:08] 小7的新文哦 ,支持下

    浩子9年前 (2010-06-23)回复

themebetter 国内更好的WordPress主题服务商

立即前往