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對象

 

　　六　　源碼

 　　源碼下載。