JS基础——Function类型总结

Function类型

在JavaScript中，函数是一种特殊的对象。每一个函数都是一个Function类型的实例，而且与其它的引用类型一样，都有属性和方法。
由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某一个函数绑定。理解这一点，对于函数的学习至关重要。

函数有三种定义语法

• 使用函数声明语法定义

    function sum (num1, num2){
        return num1 + num2;
    };

• 使用函数表达式定义

    var sum = function(num1, num2){
        return num1 + num2;
    };

• 使用Function构造函数定义

    var sum = new Function("num1", "num2", "return num1 + num2");//不推荐

由于函数名仅仅是指向函数的指针，因此函数名与包含对象指针的其他变量没有什么不同。换句话说，一个函数可能会有多个名字，如下面的例子所示。

    function sum (num1, num2){
        return num1 + num2;
    }
    alert(sum(10, 10));          //20

    var anotherSum = sum;
    alert(anotherSum(10, 10));  //20

    sum = null;
    alert(anotherSum(10, 10));  //20

以上代码首先定义了一个名为sum()的函数，用于求两个值的和。

然后，又声明了变量anotherSum，并将其设置为与sum相等（将sum的值赋给anotherSum）。

注意，使用不带圆括号的函数名是访问函数指针，而非调用函数。

此时，anotherSum和sum就都指向了同一个函数，因此anotherSum()也可以被调用并返回结果。

即使将sum设置为null，让它与函数“断绝关系”，但仍然可以正常调用anotherSum()。

因此，也不难理解为什么ECMAscript中没有函数重载的概念。

函数声明与函数表达式不同点

解析器在向执行环境中加载数据时，会率先读取函数声明，并使其在执行任何代码之前可用（可以访问）；至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解释执行。

    alert(sum(10, 10));
    var sum = function(num1, num2) {
        return num1 + num2;
    }

以上代码之所以会在运行期间产生错误，原因是在执行到函数所在的语句之前，变量sum中不会保存有对函数的引用；而且，由于第一行代码就会导致“unexpected identifier”（意外标识符）错误，实际上也不会执行到下一行。

函数内部属性

在函数内部，有两个特殊的对象：arguments和this。其中，arguments是一个类数组对象，包含着传入函数中的所有参数。虽然arguments的主要用途是保存函数参数，但这个对象还有一个名叫callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。请看下面这个非常经典的阶乘函数。

    function factorial(num) {
        if (num <=1 ) {
            return 1;
        } else {
            return num * factorial(num - 1);
        }
    }

定义阶乘函数一般都要用到递归算法；如上面的代码所示，在函数有名字，而且名字以后也不会变的情况下，这样定义没有问题。
但问题是这个函数的执行与函数名factorial紧紧耦合在了一起。为了消除这种紧密耦合的现象，可以像下面这样使用arguments.callee。

    function factorial(num) {
        if (num <=1 ) {
            return 1;
        } else {
            return num * arguments.callee(num - 1);
        }
    }

函数内部的另一个特殊对象是this，其行为与Java和C#中的this大致类似。换句话说，this引用的是函数执行的环境对象——或者也可以说是this值（当在网页的全局作用域中调用函数时，this对象引用的就是window）。来看下面的例子。

    window.color = "red";
    var o = {color:"blue"};

    function sayColor(){
        clert(this.color);
    }

    sayColor();         //“red”
    o.sayColor = sayColor;
    o.sayColor();       //"blue"

上面这个函数sayColor()是在全局作用域中定义的，它引用了this对象。当在全局作用域中调用sayColor()时，this引用的是全局对象window。而当把这个函数赋给对象o并调用o.sayColor()时，this引用的是对象o，因此对this.color求值会转换成对o.color求值。

一定要牢记，函数的名字仅仅是一个包含指针的变量而已。因此，即使是在不同的环境中执行，全局的sayColor()函数与o.sayColor()指向的仍然是同一个函数。

函数属性和方法

在ECMAScript中的函数是对象，因此函数也有属性和方法。每个函数都包含两个属性：length和prototype。其中，length属性表示函数希望接收的命名参数的个数。

对于ECMAScript中的引用类型而言，prototype是保存它们所有实例方法的真正所在。换句话说，诸如toString()和valueOf()等方法实际上都保存在prototype名下，只不过是通过各自对象的实例访问罢了。

在ECMAScript 5中，prototype属性是不可枚举的，因此使用for-in无法发现。

每个函数都包含两个非继承而来的方法：apply()和call()。这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。

首先，apply()方法接收两个参数：一个是在其中运行函数的作用域，另一个是参数数组。其中，第二个参数可以是Array的实例，也可以是arguments对象。例如：

    function sum(num1, num2) {
        return num1 + num2;
    }
    function callSum1(num1 ,num2) {
        return sum.apply(this, arguments);  //传入arguments对象  
    }
    function callSum2(num1, num2) {
        return sum.apply(this, [num1, num2]);   //传入数组
    }

    alert(callSum1(10, 10));                //20
    alert(callSum2(10, 10));                //20

在上面这个例子中，callSum1( )在执行sum( )函数时传入了this作为this值（因为是在全局作用域中调用的，所以传入的就是window对象）和arguments对象。而callSum2同样也调用了sum( )函数，但它传入的则是this和一个参数数组。这两个函数都会正常执行并返回正确的结果。

在严格模式下，未指定环境对象而调用函数，则this值不会转型为window。
除非明确把函数添加到某个对象或者调用apply()或call()，否则this值将是undefined。

call()方法与apply()方法的作用相同，它们的区别仅在于接收参数的方式不同。在使用call()方法时，传递给函数的参数必须逐个列举出来，如下面的例子所示。

    function sum(num1, num2) {
        return num1 + num2;
    }
    function callSum(num1 ,num2) {
        return sum.apply(this, num1, num2);
    }


    alert(callSum(10, 10));            //20

ECMAScript 5还定义了一个方法：bind()。这个方法会创建一个函数的实例，其this值会被绑定到传给bind()函数的值。例如：

    window.color = "red";
    var o = {color:"blue"};

    function sayColor(){
        alert(this.color);
    }

    var objectSayColor = sayColor.bind(o);
    objectSayColor();           //blue

在这里，sayColor()调用bind()并传入对象o，创建了objectSayColor()函数。object-SayColor()函数的this值等于o，因此即使是在全局作用域中调用这个函数，也会看到"blue"。

---

JS基础——Function类型 (完)