this

“寫在前面:js中的this指向是在調(diào)用過程中確定的肮帐,而不是定義過程中”

5種情況,如下:

  1. 普通函數(shù)調(diào)用
// 例1
function b () {
    console.log(this) // window
}
b()

// 例2
var id = 1
function a () {
    console.log(this.id) // 1
}
a()

:該情況下,this指向全局對象window。例2中id定義在全局對象上雷客,實際為window.id,因此打出來的1桥狡。

  1. 對象調(diào)用
// 例1
let obj = {
    id:1,
    test1() {
        console.log(this.id) // 1
    }
}
obj.test1()

// 例2
test2() {
    console.log(this.id)
}
let obj2 = {}
obj2.id = 2
obj2.do = test2
obj2.do() // 2

:例1中obj調(diào)用了test1方法搅裙,那么該this就指向該對象皱卓。例2中,當(dāng)定義test2方法時部逮,并不能確定該this的指向娜汁,只有當(dāng)該方法被放入obj2中,并且obj2調(diào)用它時兄朋,此時我們才能確定該this指向obj2掐禁。(記住文章開頭寫在前面的那句話)

  1. 構(gòu)造函數(shù)
function A(id) {
    this.id = id
}

let a = new A(1)
a.id = 1

let b = new A(2)
b.id = 2

:在構(gòu)造函數(shù)中的this代表的是調(diào)用該構(gòu)造函數(shù)的那個對象,說白了就是“誰調(diào)用颅和,就指向誰”穆桂。例1中this指向a,例2中this指向b融虽。

new 關(guān)鍵字可以改變this指向。

  1. apply/call可以改變this指向
let obj = {
    id: 1,
    test() {
        console.log(this.id)
    }
}

let obj1 = {
    id: 2
}
obj.test.apply(obj1) // 2

:在obj.test()中的this是指向obj的灼芭,這是沒問題的有额。通過apply我們可以強制更改this指向obj1,因此輸出的結(jié)果為2彼绷。

apply/call的用法可以參考我的這篇講解

5.箭頭函數(shù)

// 例1
let obj = {
    id: 1,
    a() {
        setTimeout( () => {
            console.log(this.id) // 1
        })
    }
}
obj.a()

// 例2
let obj2 = {
    id: 2,
    a: () => {
        console.log(this) // window
    }
}
obj2.a()

答:箭頭函數(shù)中的this指向巍佑,與上層作用域鏈保持一致,說白了就是“上層this指向誰寄悯,他就指向誰”萤衰。例1中,setTimeout中的this指向與a()方法一致猜旬,a方法則指向obj脆栋,因此輸出1。例2中洒擦,方法a為箭頭函數(shù)椿争,this指向與上層一致,則指向window熟嫩。

大家對于例2可能有點疑惑秦踪,為什么會指向window,而不是obj掸茅,是不是與之前的“誰調(diào)用就指向誰”相矛盾椅邓,1.大家對于箭頭函數(shù)需要單獨看待哦~,不能和普通函數(shù)一致處理昧狮。

2.方法a的上層作用域就是window景馁,obj2只是一個對象,并不是一個作用域鏈(可以去細(xì)了解下作用域鏈方面的知識)陵且,最簡單的作用域鏈就是一個方法裁僧,方法內(nèi)/方法外是不同的作用域个束。

舉個例子:

function a() {
    var id = 1
}
console.log(id) // undefined

從這大家可以看出,在a方法內(nèi)定義的方法聊疲,在外部是訪問不到的茬底。這是因為方法a內(nèi)部是一個局部作用域,而在外部是一個全局作用域获洲,全局作用域中是訪問不到局部作用域的阱表。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市贡珊,隨后出現(xiàn)的幾起案子最爬,更是在濱河造成了極大的恐慌,老刑警劉巖门岔,帶你破解...
    沈念sama閱讀 218,204評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件爱致,死亡現(xiàn)場離奇詭異,居然都是意外死亡寒随,警方通過查閱死者的電腦和手機糠悯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來妻往,“玉大人互艾,你說我怎么就攤上這事⊙镀” “怎么了纫普?”我有些...
    開封第一講書人閱讀 164,548評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長好渠。 經(jīng)常有香客問我昨稼,道長,這世上最難降的妖魔是什么晦墙? 我笑而不...
    開封第一講書人閱讀 58,657評論 1 293
  • 正文 為了忘掉前任悦昵,我火速辦了婚禮,結(jié)果婚禮上晌畅,老公的妹妹穿的比我還像新娘但指。我一直安慰自己,他們只是感情好抗楔,可當(dāng)我...
    茶點故事閱讀 67,689評論 6 392
  • 文/花漫 我一把揭開白布棋凳。 她就那樣靜靜地躺著,像睡著了一般连躏。 火紅的嫁衣襯著肌膚如雪剩岳。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,554評論 1 305
  • 那天入热,我揣著相機與錄音拍棕,去河邊找鬼晓铆。 笑死,一個胖子當(dāng)著我的面吹牛绰播,可吹牛的內(nèi)容都是我干的骄噪。 我是一名探鬼主播,決...
    沈念sama閱讀 40,302評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼蠢箩,長吁一口氣:“原來是場噩夢啊……” “哼链蕊!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起谬泌,我...
    開封第一講書人閱讀 39,216評論 0 276
  • 序言:老撾萬榮一對情侶失蹤滔韵,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后掌实,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體陪蜻,經(jīng)...
    沈念sama閱讀 45,661評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,851評論 3 336
  • 正文 我和宋清朗相戀三年贱鼻,在試婚紗的時候發(fā)現(xiàn)自己被綠了囱皿。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,977評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡忱嘹,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出耕渴,到底是詐尸還是另有隱情拘悦,我是刑警寧澤,帶...
    沈念sama閱讀 35,697評論 5 347
  • 正文 年R本政府宣布橱脸,位于F島的核電站础米,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏添诉。R本人自食惡果不足惜屁桑,卻給世界環(huán)境...
    茶點故事閱讀 41,306評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望栏赴。 院中可真熱鬧蘑斧,春花似錦、人聲如沸须眷。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽花颗。三九已至捕传,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間扩劝,已是汗流浹背庸论。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評論 1 270
  • 我被黑心中介騙來泰國打工职辅, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人聂示。 一個月前我還...
    沈念sama閱讀 48,138評論 3 370
  • 正文 我出身青樓域携,卻偏偏與公主長得像,于是被迫代替她去往敵國和親催什。 傳聞我的和親對象是個殘疾皇子涵亏,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,927評論 2 355

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