1. 程式人生 > >Js的四種呼叫方式和this繫結物件——《JavaScript語言精粹》

Js的四種呼叫方式和this繫結物件——《JavaScript語言精粹》

JavaScript一共有四種呼叫模式:方法呼叫模式、函式呼叫模式、構造器呼叫模式和apply呼叫模式。

方法呼叫模式:

當一個函式被儲存為物件的一個屬性時,我們稱之為一個方法。當一個方法被呼叫時,this被繫結到該物件。

var myObject = {
    value: 0,
    increment:function(inc){
        this.value += typeof inc === 'number' ? inc : 1;
    }
};
myObject.increment();
document.writeln(myObject.value);//1

myObject.increment(2);
document.writeln(myObject.value);//3

函式呼叫模式

當一個函式並非一個物件的屬性時,那麼它被當作一個函式來呼叫。此時this被繫結到全域性物件。這是語言設計上到一個錯誤。如果語言設計正確,當內部函式被呼叫時,this應該仍然繫結到外部函式的this變數。這個bug導致方法不能利用內部函式來幫助它工作。解決的方法是:

var add = function(a,b){
    return a+b;
};
myObject.double = function(){
    var that = this;//解決方法

    var helper = function(){
        that.value = add(that.value, that.value);
    };

    helper();//內部函式呼叫時,this被繫結到全域性物件
};

myObject.double();
document.writeln(myObject.value);

構造器呼叫模式

如果在一個函式前面帶上new來呼叫,那麼將建立一個隱藏連線到該函式的prototype成員到新物件,同時this將會被繫結到那個新物件上。

var Quo = function(string){//構造器函式
    this.status = string;
};
Quo.prototype.get_status = function(){
    return this.status;
}

var myQuo = new Quo("confused");
document.writeln(myQuo.get_status());//confused

apply呼叫模式

apply方法允許我們構建引數陣列來呼叫函式,同時它也允許我們選擇函式的this值。apply方法接收兩個引數。第一個是將被繫結給this的值。第二個就是一個引數陣列。

var array = [3,4];
var sum = add.apply(null,array);//7

var statusObject = {
    status:"A-OK"
};
var status = Quo.prototype.get_status.apply(statusObject);//"A-OK"