Javascript函數調用的四種模式

　　一　　前言

　　Javascript一共有四種調用模式：方法調用模式、函數調用模式、構造器調用模式以及apply調用模式。調用模式不同，對應的隱藏參數this值也會不同。

 

　　二　　方法調用模式

　　函數作為對象的屬性時，稱為方法。此時函數（即方法）中的this對應是該對象。

var myObject = {
　　value:3,
　　func:function(){
　　　　alert(this.value);
　　}
　　
};

//　方法調用模式，this對應的是myObject對象
myObject.func();　　//3

　　也可以寫成如下格式：

var myObject = {
    value:3
};

myObject.func = function() {
    alert(this.value);
}

// 方法調用模式
myObject.func();　　//3

　　上面，this對應的是myObject對象。

 

　　三　　函數調用模式

　　函數調用模式即通常的函數調用，屬於全局性調用，此時this對應的是全局對象，即Window對象。

var add = function(a, b) {
    return a + b;
}

// 函數調用模式
add(3,4);    //7

　　上面也可以寫成

window.add = function(a, b) {
    return a + b;
}

// 函數調用模式
add(3,4); //7

　　下面來看看下面的測試題，以檢驗你是否了解了this。

<script type="text/javascript">
   var add = function(a, b) {
        return a + b;
    }

    var myObject = {
        value:3
    };

    myObject.func = function() {
        var helper = function() {
            this.value = add(this.value, this.value); 
        }

　　　　// 函數調用模式
    　　helper();
    }
    
　　// 方法調用模式
　　 myObject.func();

    alert(myObject.value);
            
</script>

　　答案會是6嗎？仔細想想。

　　答案為6的程序應該是這樣的：

<script type="text/javascript">
    var add = function(a, b) {
        return a + b;
    }

    var myObject = {
        value:3
    };

    myObject.func = function() {
        var that = this; // this對應myObject對象   （1）
        var helper = function() {
            //this.value = add(this.value, this.value); //這里調用模式為函數調用模式，而非方法調用模式，所以this對應全局對象   （2） that.value = add(that.value, that.value);
        }
　　　　
　　　　// 函數調用模式
    　　helper();
    }
     
　　// 方法調用模式   
　　 myObject.func();

    alert(myObject.value);
            
</script>

　　（1）處this在firefox調試如下：（方法調用模式處）

　　

　　（2）處this在firefox調試如下：（函數調用模式處）

　　

 

　　四　　構造器調用模式

　　若在函數前面通過new 來調用，其實是生成一新對象，this自然指向該新對象。

var add = function(a, b) {
    return a + b;
}

// 構造器調用模式
var obj = new add(3, 4);

　　obj為一對象：

　　

　　對於構造器調用模式，如果函數返回值不是一個對象，則返回該新對象，即this。

 

　　五　　apply調用模式

　　apply方法有兩個參數，第一個是要綁定給this的值，第二個是一個參數數組。

// apply調用模式
var sum = add.apply(null,[3,4]);       // this對應全局變量，即window對象
var sum2 = add.apply(myObject,[3,4]);  //this對應為myObject對象

 

　　六　　源碼

 　　源碼下載。