javaScript函數(shù)中this的四種綁定形式

1酬荞、默認綁定

當一個函數(shù)沒有明確的調(diào)用對象的時候,也就是單純作為獨立函數(shù)調(diào)用的時候瞧哟,將對函數(shù)的this使用默認綁定:綁定到全局的window對象

function a () {
   console.log(this)
}
a(); // 輸出window

2混巧、隱式綁定

當函數(shù)引用有上下文對象時,函數(shù)調(diào)用中的this會綁定到這個上下文對象

function foo() {
  console.log(this.a)
}
let obj = {
  a: 2,
  foo: foo
}
obj.foo(); // 輸出2

2.1勤揩、隱式丟失

直接調(diào)用引用的函數(shù)時咧党,函數(shù)是沒有上下文對象的,隱式綁定的this丟失了

function foo() {
  console.log(this.a)
}
let obj = {
  a: 2,
  foo: foo
}
let a = 3;            // a是全局對象的屬性
let foo2 = obj.foo;   // 這里foo2將引用foo函數(shù)本身陨亡,所以不帶有函數(shù)對象的上下文
foo2();               // 輸出3

3傍衡、顯示綁定

采用call()和apply(),通過傳入一個對象(若為基本類型负蠕,會被封裝函數(shù)轉為對象—裝箱)蛙埂,將this綁定到該對象

function foo() {
  console.log(this.a)
}
let obj = {
  a: 2,
  foo: foo
}
let a = 3;            // a是全局對象的屬性
let foo2 = obj.foo;   // 這里foo2將引用foo函數(shù)本身,所以不帶有函數(shù)對象的上下文
foo2();               // 輸出3
foo2.call(obj);       // 輸出2  
foo2.apply(obj);      // 輸出2

使用bind也可以將this綁定到一個對象遮糖,但是bind不執(zhí)行函數(shù)绣的,只返回一個可供執(zhí)行的函數(shù)

let b = foo2.bind(obj);  // 此時返回一個可供執(zhí)行的函數(shù)
b();                     // 輸出2

4、new綁定

任何函數(shù)都可能被用作構造函數(shù),當函數(shù)被new操作符“構造調(diào)用”時屡江,會執(zhí)行下面操作:

  1. 創(chuàng)建一個新對象(若該函數(shù)不是JS內(nèi)置的芭概,則創(chuàng)建一個新的Object對象);
  2. 將this綁定到這個對象惩嘉;
  3. 執(zhí)行構造函數(shù)中的代碼(為這個新對象添加屬性)谈山;
  4. 若函數(shù)沒有返回其他對象,則自動返回這個新對象宏怔;若函數(shù)有return返回的是非對象奏路,則還是自動返回這個新對象,即覆蓋那個非對象臊诊。
function foo (a) {
     this.a = a;
}
 
var a1  = new foo (1);
var a2  = new foo (2);
 
console.log(a1.a); // 輸出1
console.log(a2.a); // 輸出2
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末鸽粉,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子抓艳,更是在濱河造成了極大的恐慌触机,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,470評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件玷或,死亡現(xiàn)場離奇詭異儡首,居然都是意外死亡,警方通過查閱死者的電腦和手機偏友,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3 392
  • 文/潘曉璐 我一進店門蔬胯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人位他,你說我怎么就攤上這事氛濒。” “怎么了鹅髓?”我有些...
    開封第一講書人閱讀 162,577評論 0 353
  • 文/不壞的土叔 我叫張陵舞竿,是天一觀的道長。 經(jīng)常有香客問我窿冯,道長骗奖,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,176評論 1 292
  • 正文 為了忘掉前任醒串,我火速辦了婚禮执桌,結果婚禮上,老公的妹妹穿的比我還像新娘厦凤。我一直安慰自己鼻吮,他們只是感情好,可當我...
    茶點故事閱讀 67,189評論 6 388
  • 文/花漫 我一把揭開白布较鼓。 她就那樣靜靜地躺著椎木,像睡著了一般违柏。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上香椎,一...
    開封第一講書人閱讀 51,155評論 1 299
  • 那天漱竖,我揣著相機與錄音,去河邊找鬼畜伐。 笑死馍惹,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的玛界。 我是一名探鬼主播万矾,決...
    沈念sama閱讀 40,041評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼慎框!你這毒婦竟也來了良狈?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,903評論 0 274
  • 序言:老撾萬榮一對情侶失蹤笨枯,失蹤者是張志新(化名)和其女友劉穎薪丁,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體馅精,經(jīng)...
    沈念sama閱讀 45,319評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡严嗜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,539評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了洲敢。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片漫玄。...
    茶點故事閱讀 39,703評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖沦疾,靈堂內(nèi)的尸體忽然破棺而出称近,到底是詐尸還是另有隱情,我是刑警寧澤哮塞,帶...
    沈念sama閱讀 35,417評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站凳谦,受9級特大地震影響忆畅,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜尸执,卻給世界環(huán)境...
    茶點故事閱讀 41,013評論 3 325
  • 文/蒙蒙 一家凯、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧如失,春花似錦绊诲、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽抗俄。三九已至,卻和暖如春世舰,著一層夾襖步出監(jiān)牢的瞬間动雹,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1 269
  • 我被黑心中介騙來泰國打工跟压, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留胰蝠,地道東北人。 一個月前我還...
    沈念sama閱讀 47,711評論 2 368
  • 正文 我出身青樓震蒋,卻偏偏與公主長得像茸塞,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子查剖,可洞房花燭夜當晚...
    茶點故事閱讀 44,601評論 2 353