讓你徹底明白this的指向問題

關于this指向的問題厘擂,想必困擾了很多初學JavaScript的同學,一會指向這個一會指向那個锰瘸,讓初學者一臉懵逼刽严。今天我們就來聊聊js面向對象里this的指向問題,讓初學者看完對this有個大概的了解避凝,不再對其有恐懼的感覺舞萄。

1.構造函數

第一種情況我們聊聊在構造函數里this的指向問題眨补。看下面的代碼:

function Person(){
  this.name='老王';
  this.age='99';
  console.log(this)//Person {'name':'老王','age':'99'}
}
var p1=new Person();
console.log(p1.name)//'老王'

從上面的代碼中我們看到this打印出來是一個對象'name':'老王','age':'99'}倒脓,而這個對象的兩個屬性竟然和構造函數Person中的兩個屬性一樣撑螺,這是巧合嗎?答案當然不是了把还,哪有那么多巧合实蓬。在構造函數中this的指向就是構造函數本身,當然,我們使用這個函數的時候也是把他當做構造函數來使用的吊履,所以打印出來那么對象也沒那么奇怪了安皱。

那么p1.name為什么打印出來是‘老王’,因為p1是構造函數的Person的實例化出來的艇炎,所以p1繼承了Person的屬性酌伊,你要問我為什么,那么請看我關于原型和原型鏈的詳細理解這篇文章缀踪,你就會明白,本文就不過多的闡述了居砖。

2.函數作為對象的一個屬性

函數作為對象的一個屬性,并且作為對象的一個屬性被調用時驴娃,這種情況下this的指向和上面作為構造函數的this指向不一樣了奏候。看下面代碼:

var obj={
  'name':'老王',
  'age':'99',
  'box':function(){
  console.log(this);//obj{'name':'老王','age':'99','box':function}
  }
}
obj.box();

以上代碼中唇敞,box不僅作為一個對象的一個屬性蔗草,而且的確是作為對象的一個屬性被調用。結果this就是obj對象疆柔。

那么會不會有這種情況咒精,這個函數不是作為對象的一個屬性被調用?有旷档,這種情況可以有模叙。但是此時this的指向又發(fā)生了變化。還是看代碼:

var obj={
  'name':'老王',
  'age':'99',
  'box':function(){
  console.log(this);
  }
}
var fn=obj.box
fn();

這種情況下大家猜一下this打印出來的是什么鞋屈?
答案是Window范咨,為什么?來谐区,跟著我的思路走湖蜕。
在上面的代碼中我定義了一個全局變量fn,并且賦值為obj.box宋列,那么此時obj.box就已經發(fā)生變化了昭抒,fn是全局變量,屬于window,那么此時this指向window灭返。

3.函數用call或者apply調用

當一個函數被call和apply調用時盗迟,this的值就取傳入的對象的值。至于call和apply如何使用熙含,不會的同學可以去查查其他資料罚缕,這里就不做詳細講解了,因為比較簡單怎静。

4.全局 & 調用普通函數

在全局下邮弹,this永遠指向的都是window,這個誰還有異議可以面壁思過去了蚓聘。
普通函數在調用時腌乡,其中的this也都是window∫鼓担看代碼:

var a='厲害了我的哥';
var box=function(){
  console.log(this.a);//厲害了我的哥'
}
box();

普通函調用時為什么this會指向window呢与纽?還是作為全局變量的問題。

5.特殊情況

為什么還有特殊情況呢塘装,請大家注意一個點急迂,this的指向在定時器setTimeout和setInterval會發(fā)生變化。但是變化是什么呢蹦肴?各位同學去百度僚碎,上班時間寫文章怕被抓。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末阴幌,一起剝皮案震驚了整個濱河市听盖,隨后出現的幾起案子,更是在濱河造成了極大的恐慌裂七,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,692評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件仓坞,死亡現場離奇詭異背零,居然都是意外死亡,警方通過查閱死者的電腦和手機无埃,發(fā)現死者居然都...
    沈念sama閱讀 92,482評論 3 392
  • 文/潘曉璐 我一進店門徙瓶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人嫉称,你說我怎么就攤上這事侦镇。” “怎么了织阅?”我有些...
    開封第一講書人閱讀 162,995評論 0 353
  • 文/不壞的土叔 我叫張陵壳繁,是天一觀的道長。 經常有香客問我,道長闹炉,這世上最難降的妖魔是什么蒿赢? 我笑而不...
    開封第一講書人閱讀 58,223評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮渣触,結果婚禮上羡棵,老公的妹妹穿的比我還像新娘。我一直安慰自己嗅钻,他們只是感情好皂冰,可當我...
    茶點故事閱讀 67,245評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著养篓,像睡著了一般秃流。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上觉至,一...
    開封第一講書人閱讀 51,208評論 1 299
  • 那天剔应,我揣著相機與錄音,去河邊找鬼语御。 笑死峻贮,一個胖子當著我的面吹牛,可吹牛的內容都是我干的应闯。 我是一名探鬼主播纤控,決...
    沈念sama閱讀 40,091評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼碉纺!你這毒婦竟也來了船万?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,929評論 0 274
  • 序言:老撾萬榮一對情侶失蹤骨田,失蹤者是張志新(化名)和其女友劉穎耿导,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體态贤,經...
    沈念sama閱讀 45,346評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡舱呻,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,570評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了悠汽。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片箱吕。...
    茶點故事閱讀 39,739評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖柿冲,靈堂內的尸體忽然破棺而出茬高,到底是詐尸還是另有隱情,我是刑警寧澤假抄,帶...
    沈念sama閱讀 35,437評論 5 344
  • 正文 年R本政府宣布怎栽,位于F島的核電站丽猬,受9級特大地震影響,放射性物質發(fā)生泄漏婚瓜。R本人自食惡果不足惜宝鼓,卻給世界環(huán)境...
    茶點故事閱讀 41,037評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望巴刻。 院中可真熱鬧愚铡,春花似錦、人聲如沸胡陪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,677評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽柠座。三九已至邑雅,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間妈经,已是汗流浹背淮野。 一陣腳步聲響...
    開封第一講書人閱讀 32,833評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留吹泡,地道東北人骤星。 一個月前我還...
    沈念sama閱讀 47,760評論 2 369
  • 正文 我出身青樓,卻偏偏與公主長得像爆哑,于是被迫代替她去往敵國和親洞难。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,647評論 2 354

推薦閱讀更多精彩內容

  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創(chuàng)建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,233評論 0 4
  • 1. this之謎 在JavaScript中揭朝,this是當前執(zhí)行函數的上下文队贱。因為JavaScript有4種不同的...
    百里少龍閱讀 996評論 0 3
  • 終于讀完了這本書柱嫌,想要記錄一些東西。說來慚愧屯换,很早就知道這本書慎式,卻到現在才真正的靜下心讀完它。因為以前只看對自己有...
    梓夢柔閱讀 426評論 0 1
  • 在朋友圈里曬張旅游門票趟径,有人就說好幸福,在微博里隨便發(fā)張風景圖癣防,就有人說光調的好蜗巧,好久不聯系的同學問我在干嘛,我說...
    言嘉辰閱讀 434評論 0 2
  • 每個人多多少少都會有些不為人知或讓人覺得不可思議的習慣蕾盯,在其他人眼里可能就是所謂的異類幕屹,或者奇葩。 究竟要怎么界定...
    鬼目春閱讀 469評論 2 0