javascript自执行函数_JavaScript教程_开发教程

起因，今天在豪大大的JS开发群里有人问了一道题，

vartest=(function(a){
    this.a=a;
    returnfunction(b){
        returnthis.a.e + this.a.f + b;
    }
}(function(a,b){
    return{
        e:a,
        f:b
    };
}(1,8)));
console.log(test(4));

对此有点似懂非懂，于是就查阅了一番。

( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法，最初我以为是一个括号包裹匿名函数，然后再在后面加个括号调用函数，最后达到函数定义后立即执行的目的，后来查看资料发现并非如此。要理解立即执行函数，需要先理解一些函数的基本概念。

函数声明、函数表达式、匿名函数，立即执行函数

函数声明（Function Declaration）的典型格式

functionfun(){
}

函数表达式（Function Expression）的典型格式

varfun=function(){
}

匿名函数function () {}; 使用function关键字声明一个函数，但未给函数命名，所以叫匿名函数

立即执行函数(Immediate Functions)的典型格式

(function(){
    alert('watchout!');
}());

这种定义匿名函数并立即在单个表达式中调用的写法非常常见，已经成为一种惯用法了。注意上面代码圆括号的用法，function之前的左圆括号是必须的，因为如果不写这个左圆括号， Javascript解析器会试图将关键字function解析为函数声明语句。使用圆括号Javascript解析器才会正确的将其解析为函数定义表达式。使用圆括号是习惯用法，尽管有其他的不同表达方式。

可以看到将函数声明转换成函数表达式有多种不同方式

(function(a){
    console.log(a);//输出123,使用（）运算符
})(123);
(function(a){
    console.log(a);//输出1234，使用（）运算符
}(1234));
!function(a){
    console.log(a);//输出12345,使用！运算符
}(12345);
+function(a){
    console.log(a);//输出123456,使用+运算符
}(123456);
-function(a){
    console.log(a);//输出1234567,使用-运算符
}(1234567);
varfn=function(a){
    console.log(a);//输出12345678，使用=运算符
}(12345678)

关于立即执行函数的返回值

就像其它任何函数一样，一个立即执行函数也能返回值并且可以复制给其它变量

varresult=(function(){
    return1+2;
}());
varresult=function(){
     return1+2;
}();

这两个实现的功能是一样的。

这种语法是非常简单的，但它可能看起来有点令人误导；如果没有注意到函数结束的括号，

一些人可能就会认为result指向一个函数；实际上result指向立即执行函数的返回值，在这种情况下是数字 3 。

如下代码

vartest=(function(){
    vari=0;
    return{
        get:function(){
            returni;
        },
        set:function(val){
            i=val;
        },
        increment:function(){
            return++i;
        }
     };
}());
test.get();//0
test.set(3);
test.increment();//4

再返回到最开始

vartest=(function(a){
    this.a=a;
    returnfunction(b){
        returnthis.a.e + this.a.f + b;
    }
}(function(a,b){
    return{
        e : a,
        f : b
    };
}(1,8)));
console.log(test(4));

可以把

function(a,b){
    return{
        e : a,
        f : b
    };
}(1,8)

看作一个整体，返回

{
    e : 1,
    f : 8
}

return this.a.e + this.a.f + b;就是1+8+4 = 13了。

有错误的地方欢迎拍砖

(责任编辑：好模板)