js中this的四種調(diào)用模式

在javascript中一共有四種調(diào)用模式:方法調(diào)用模式版保,函數(shù)調(diào)用模式,構(gòu)造器調(diào)用模式玩荠,apply調(diào)用模式
這些模式在如何初始化關(guān)鍵參數(shù)this上存在差異辛块。
1 方法調(diào)用模式(也就是用"."的方式來調(diào)用的)
當一個函數(shù)被保存為對象的一個屬性時,我們稱它為一個方法槐沼。當一個方法被調(diào)用時曙蒸,this被綁定到該對象捌治。如果一個調(diào)用表達式包含一個屬性存取表達式(即一個.點表達式或者[subscript]下標表達式),那么它被當做一個方法來調(diào)用

var myObject = {
  value :0;
  increment:fucntion (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到對象的綁定發(fā)生在調(diào)用的時候具滴。這個“超級”遲綁定( very late binding)使得函數(shù)可以對this高度復(fù)用。通過this可取得它們所屬對象的上下文的方法稱為公共方法师倔。

2 函數(shù)調(diào)用模式

當一個函數(shù)并非一個對象的屬性是构韵,那么它被當做一個函數(shù)來調(diào)用:
var sum = add(3,4); //sum的值為7
當函數(shù)以此模式調(diào)用時,this被綁定到全局對象趋艘。這是語言設(shè)計上的一個錯誤疲恢,倘若語言設(shè)計正確,當內(nèi)部函數(shù)被調(diào)用時瓷胧,this應(yīng)該仍然綁定到外部函數(shù)的this變量显拳。這個設(shè)計錯誤錯誤的后果是方法不能利用內(nèi)部函數(shù)來幫助它工作,因為內(nèi)部函數(shù)的this被綁定了錯誤的值搓萧,所以不能共享該方法對對象的訪問權(quán)杂数。幸運的是,有一個很容易的解決方案:如果該方法定義一個變量并給他賦值為this瘸洛,那么內(nèi)部函數(shù)就可以通過那個變量訪問到this揍移。

//給myObject增加一個double方法
myObject.double = function(){
    var that = this; //解決方案
    var helper = function(){
        that.value = add(that.value,that.value);
    };
    helper();//以函數(shù)的形式調(diào)用helper
};
//以方法的形式調(diào)用double
myObject.double();
document.writeln(myObject.getValue()); //6

3、構(gòu)造器調(diào)用模式:
調(diào)用形式:在函數(shù)名前加 new 來調(diào)用反肋。
this綁定:將創(chuàng)建一個隱藏連接到該函數(shù)的 prototype 成員的新對象那伐,同時 this 將會被綁定到這個新對象上。
例子:

//  創(chuàng)建一個名為 Quo 的構(gòu)造器函數(shù)石蔗。它構(gòu)造一個帶有 status 屬性的對象罕邀。
var Quo = function (string) {
    this.status = string;
};
//  給 Quo 的所有實例提供一個名為 get_status 的公共方法
Quo.prototype.get_status = function () {
    return this.status;
};

注意:在JavaScript中如果用 new 方式調(diào)用一個函數(shù),如果函數(shù)沒有返回一個對象养距,則返回 this诉探。
下面在用 new 調(diào)用 Quo 這個構(gòu)造函數(shù)時,因為 Quo 函數(shù)沒有返回值棍厌,所以默認返回 this gei myQuo肾胯。
// 構(gòu)造一個 Quo 實例

var yQuo = new Quo("confused");    //  myQuo 的值被賦予了 this,而此時的 this 是 Quo 的 prototype 成員定铜。
document.writeln(myQuo.get_status());    //  confused    this.status 即 Quo.prototype.status 在調(diào)用 new 構(gòu)造 Quo 時即被賦予了 confused阳液。
document.writeln(myQuo.status);    //  confused

如果調(diào)用構(gòu)造器函數(shù)時前面沒有加 new,將會發(fā)生錯誤:

var myQuo = Quo("confused");
document.writeln(myQuo);    //  undefined    可見揣炕,沒有用 new 調(diào)用構(gòu)造器函數(shù)帘皿,它將不會有任何返回值給 myQuo。

4畸陡、Apply/Call調(diào)用模式:
調(diào)用形式:通過apply/call方法調(diào)用函數(shù)鹰溜,其中第一個參數(shù)為我們指定的 this 的值虽填。
this綁定:允許我們選擇 this 的值。
例子:
// 構(gòu)造一個包含兩個數(shù)字的數(shù)組曹动,通過apply方法調(diào)用前面的add函數(shù)斋日,將數(shù)組中的數(shù)字相加

var array = [3, 4];
var sum = add.apply(null, array);    //  sum的值為7。add()中沒有使用到 this 所以參數(shù)給其設(shè)為 null 即可墓陈。

例子:
// 構(gòu)造一個包含 status 成員的對象恶守,通過 apply 方法調(diào)用前面的 Quo對象的get_status 方法返回 status。

var  statusObject = {
    status : 'A-OK'
};
var status = Quo.prototype.get_status.apply(statusObject);    //  status 值為'A-OK'  在通過 apply 調(diào)用 Quo 的 get_status 方法時將 statusObject 對象綁定給了 this 贡必,所以 get_status 方法返回的結(jié)果是 statusObject 的 status 屬性兔港。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市仔拟,隨后出現(xiàn)的幾起案子衫樊,更是在濱河造成了極大的恐慌,老刑警劉巖利花,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件科侈,死亡現(xiàn)場離奇詭異,居然都是意外死亡炒事,警方通過查閱死者的電腦和手機臀栈,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來羡洛,“玉大人挂脑,你說我怎么就攤上這事∮辏” “怎么了?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵肋联,是天一觀的道長威蕉。 經(jīng)常有香客問我,道長橄仍,這世上最難降的妖魔是什么韧涨? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮侮繁,結(jié)果婚禮上虑粥,老公的妹妹穿的比我還像新娘。我一直安慰自己宪哩,他們只是感情好娩贷,可當我...
    茶點故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著锁孟,像睡著了一般彬祖。 火紅的嫁衣襯著肌膚如雪茁瘦。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天储笑,我揣著相機與錄音甜熔,去河邊找鬼。 笑死突倍,一個胖子當著我的面吹牛腔稀,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播羽历,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼焊虏,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了窄陡?” 一聲冷哼從身側(cè)響起炕淮,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎跳夭,沒想到半個月后涂圆,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡币叹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年润歉,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片颈抚。...
    茶點故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡踩衩,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出贩汉,到底是詐尸還是另有隱情驱富,我是刑警寧澤,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布匹舞,位于F島的核電站褐鸥,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏赐稽。R本人自食惡果不足惜叫榕,卻給世界環(huán)境...
    茶點故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望姊舵。 院中可真熱鬧晰绎,春花似錦、人聲如沸括丁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至锄弱,卻和暖如春考蕾,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背会宪。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工肖卧, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人掸鹅。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓塞帐,卻偏偏與公主長得像,于是被迫代替她去往敵國和親巍沙。 傳聞我的和親對象是個殘疾皇子葵姥,可洞房花燭夜當晚...
    茶點故事閱讀 43,697評論 2 351

推薦閱讀更多精彩內(nèi)容