首页 > Javascript > Javascript中匿名函数的多种调用方式

Javascript中匿名函数的多种调用方式

学习javascript已经好多年了,平时写js脚本用了很多的匿名函数和闭包,直到最近才发现原来匿名函数的调用方式有这么多种,总算是打开眼界了。

Javascript中定义函数的方式有多种,函数直接量就是其中一种。如var fun = function(){},这里function如果不赋值给fun那么它就是一个匿名函数。好,看看匿名函数的如何被调用。


方式1,调用函数,得到返回值。强制运算符使函数调用执行

(function(x,y){
    alert(x+y);
    return x+y;
}(3,4));


方式2,调用函数,得到返回值。强制函数直接量执行再返回一个引用,引用再去调用执行

(function(x,y){
    alert(x+y);
    return x+y;
})(3,4);

这种方式也是很多库爱用的调用方式,如jQuery,社区对此种用法的称呼不尽相同,其中包括「自执行匿名函数」(self-executing anonymous function),「立即执行函数表达式」(Immediately-Invoked Function Expression,以下简称IIFE),笔者倾向于第二种叫法。

(function( window, undefined ) {
    // code here
}) ( window );


方式3,使用void

void function(x) {
      x = x-1;
      alert(x);
}(9);


方式4,使用-/+运算符

-function(x,y){
    alert(x+y);
    return x+y;
}(3,4);
 
+function(x,y){
    alert(x+y);
    return x+y;
}(3,4);
 
--function(x,y){
    alert(x+y);
    return x+y;
}(3,4);
 
++function(x,y){
    alert(x+y);
    return x+y;
}(3,4);


方式5,使用波浪符(~)

~function(x, y) {
    alert(x+y);
   return x+y;
}(3, 4);


方式6,匿名函数执行放在中括号内

[function(){
   console.log(this) // 浏览器得控制台输出window
}(this)]


方式7,匿名函数前加typeof

typeof function(){
   console.log(this) // 浏览器得控制台输出window
}(this)


方式8,匿名函数前加delete

delete function(){
   console.log(this) // 浏览器得控制台输出window
}(this)


方式9,匿名函数前加void

void function(){
   console.log(this) // 浏览器得控制台输出window
}(this)


方式10,使用new方式,传参

new function(win){
   console.log(win) // window
}(this)


方式11,使用new,不传参

new function(){
    console.log(this) // 这里的this就不是window了
}


方式12,逗号运算符

1, function(){
    console.log(this) // window
}();


方式13,按位异或运算符

1^function(){
    console.log(this) // window
}();


方式14,比较运算符

1>function(){
    console.log(this) // window
}();


来自:http://www.cnblogs.com/snandy/archive/2011/02/28/1966664.html


看了这么多写法,实际上最常用的就那么几种,太怪异的写法不容易被理解。

平时编程中曾经遇到过类似下面的问题:

var f1 = function() {    var res = [];    var fun = null;    for(var i = 0; i < 10; i++) {
        fun = function() { console.log(i);};//产生闭包
        res.push(fun);
    }    return res;
}// 会输出10个10,而不是预期的0 1 2 3 4 5 6 7 8 9var res = f1();for(var i = 0; i < res.length; i++) {
    res[i]();
}


为什么会输出10个10呢?据说这是闭包冲突,那什么是闭包呢?

闭包(closure)是JavaScript的一个语言特性,简单来说就是在函数内部所定义的函数可以持有外层函数的执行环境,即使在外层函数已经执行完毕的情况下,在这里就不详细介绍了,感兴趣的可以自行Google。


怎样让上面的程序输出0,1,2,3,4,5,6,7,8,9,10?




将代码修改为:

var f1 = function() {    var res = [];    for(var i = 0; i < 10; i++) {        // 添加一个IIFE
        (function(index) {
            fun = function() {console.log(index);};
            res.push(fun);
        })(i);
    }    return res;
}// 输出结果为0 1 2 3 4 5 6 7 8 9var res = f1();for(var i = 0; i < res.length; i++) {
    res[i]();
}


这样就ok了。

来自:http://segmentfault.com/a/1190000000327820




文章链接:http://blog.zhengshuiguang.com/js/anonymous.html

随便收藏,请保留本文地址!

标签:jquery 匿名 函数 闭包 expression

相关文章

评论已关闭