【Javascript 拾遗之五】定义函数的几种方法

经过前四个话题的洗礼，相信大家可能有点晕了吧，本文来讲解一个轻松的话题，讨论下Javascript 定义函数的几种方式， 主要是用来做面试tips的。Javascrip定义函数主要有这几种，直接定义，匿名函数定义，构造函数定义。

定义函数的几种方法 function, new Function(), Function()

1、直接定义

直接定义的方法很简单，代码如下，一般初学者都是这样定义一个函数的。但是在实际项目中要避免使用这种定义方法。这个方法的原理是在window对象下，创建了a这个属性，然后让a指向定义的这个函数体。在大型项目中不推荐使用这种方法是因为污染了全局对象，容易产生误调用。

function a(){
    var a = 2;
    this.b = 6 //这样定义也应该避免,同样污染的全局对象
    console.log(a + this.b);
}
a(); //8

2、匿名函数

这种方法定义函数在全局作用域下和上面的那种方法是完全一样的。但在其他作用域中是极力推荐使用这种方法的。

var a = function(){
    var a = 2;
    this.b = 6 //这样定义也应该避免,同样污染的全局对象
    console.log(a + this.b);
}
a();

还有一种写法容易和这种定义混淆：

var a = new function(){
    var a = 2;
    this.b = 6;
}
console.log(a.b); //6

这种方式是定义对象的方式，即是把匿名函数作为类函数直接实例化了，然后让a变量(地址)指向这个对象。和匿名函数的定义容易混淆，这里需要注意的。

3、构造函数

Function类（这里把函数看成类）定义函数，直接把函数体作为字符串传入构造函数中。new Function 和 Function 定义是一样的，这种方法定义函数同样也是不推荐的，因为，代码解析时候需要两次，一次是ECMAScript代码，一次是构造函数的字符串参数。

var a = new Function('var a = 2;this.b = 6;console.log(a + this.b);');
a();//8

1 var a = Function('var a = 2;this.b = 6;console.log(a + this.b);');
2 a();//8

注意，还有另外有一个函数eval()和new Function()方法类似，但是它不能定义函数，只能直接执行参数中的字符串代码。

 

4、总结

函数定义大体上就这几种方法，推荐使用的是匿名函数，因此大家只要把匿名函数的定义应用得炉火纯青就ok了。最后向大家推荐一种匿名函数的架构的前端框架的方法，最早是从Ext-js官网上习得的。上代码~

var MyFramework = {}
// you can define like this
MyFramework.moduleA = function(){
    var methodA = function(){
        alert('A_A');
    }
    var methodB = function(){
        alert('A_B');
    }
    return {
        methodA : methodA,
        methodB :　methodB
    }
}()
// or you can ... but this load more !avoid it
MyFramework.moduleB = new function(){
    var methodA = function(){
        alert('B_A');
    }
    var methodB = function(){
        alert('B_B');
    }
    return {
        methodA : methodA,
        methodB :　methodB
    }
}

MyFramework.moduleA.methodB();    //A_B
MyFramework.moduleB.methodA();    //B_A