您好,登錄后才能下訂單哦!
這篇文章給大家介紹JavaScript中this對(duì)象如何使用,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
this對(duì)象是在函數(shù)運(yùn)行時(shí),基于函數(shù)的執(zhí)行環(huán)境綁定的。
其實(shí)這句話的本質(zhì)就是,誰(shuí)調(diào)用了函數(shù),this就指向誰(shuí)
具體的來(lái)說(shuō),通常有以下幾種情況:
全局函數(shù)
在全局環(huán)境中,this指向Window
//例子1 function A() { console.log(this) } A();//Window
上面的例子很簡(jiǎn)單,函數(shù)A在全局環(huán)境中執(zhí)行,也就是全局對(duì)象Window調(diào)用了函數(shù)。此時(shí)this指向Window
對(duì)象方法
作為對(duì)象方法調(diào)用時(shí),this指向調(diào)用該方法的對(duì)象
//例子2 var b = { getThis:function(){ console.log(this) } } b.getThis()//b
到這里我們舉的例子都比較簡(jiǎn)單易懂,接下來(lái)來(lái)一個(gè)有意思的:
//例子3 var c = { getFunc:function(){ return function(){ console.log(this) } } } var cFun = c.getFunc() cFun()//Window
這個(gè)例子和前一個(gè)例子不一樣,運(yùn)行c.getFunc()時(shí),首先返回的是一個(gè)匿名函數(shù),我們將這個(gè)函數(shù)賦值給cFun,接著在全局環(huán)境中調(diào)用了cFun(),所以此時(shí)this指向的還是Window。
如果我們一定要讓這里返回的是c對(duì)象呢?在開頭我們說(shuō)過(guò),this對(duì)象是在函數(shù)執(zhí)行時(shí)確定的,在例子3中,執(zhí)行c.getFunc()時(shí),this對(duì)象指向的還是c,所以我們只要保持住這個(gè)this就好了,對(duì)上面的代碼稍微改動(dòng):
//例子4 var c = { getFunc:function(){ var that = this //在這里保留住this return function(){ console.log(that) } } } var cFun = c.getFunc() cFun()//c
這也就是我們經(jīng)??梢栽谝恍┐a中看到var self = this或者var that = this之類的原因了。
call和apply
此時(shí)this對(duì)象通常指向函數(shù)中指定的this值(注意這里的通常2字,考試要考的)
call和apply算是老生常談,但還是稍微介紹下,怕新同學(xué)可能沒(méi)接觸過(guò)(其實(shí)是為了湊點(diǎn)字?jǐn)?shù)),拿call來(lái)說(shuō),語(yǔ)法是這樣的
fun.call(thisArg, arg1, arg2, ...)
這個(gè)方法怎么用呢,看下面的例子:
//例子5 var d = { getThis:function(){ console.log(this) } } var e = { name:'e'//(給e寫個(gè)`name`屬性只是因?yàn)橛X得孤零零的太難看了~~) } d.getThis.call(e)//e
在這里我們就可以看出call函數(shù)的意思了:指定一個(gè)對(duì)象o1去調(diào)用其他對(duì)象o2的方法,此時(shí)this對(duì)象指向o1
好了,那為什么前面我們說(shuō)通常呢?因?yàn)?,這里的thisArg是可以指定為null和undefined的。請(qǐng)看:
//例子6 var d = { getThis:function(){ console.log(this) } } d.getThis.call(null)//Window d.getThis.call(undefined)//Window
此時(shí)的this指向全局對(duì)象Window
箭頭函數(shù)
es6中的箭頭函數(shù)現(xiàn)在也用的比較頻繁,但是有個(gè)需要注意的點(diǎn)是:
函數(shù)體內(nèi)的this對(duì)象,就是定義時(shí)所在的對(duì)象,而不是使用時(shí)所在的對(duì)象。
其實(shí)出現(xiàn)這種情況的根本原因是:箭頭函數(shù)沒(méi)有this對(duì)象,所以箭頭函數(shù)的this就是外層代碼的this
//例子7 var f = { getThis:()=>{ console.log(this) } } f.getThis()//Window
這個(gè)例子和前面例子2是基本一樣的,只是把普通函數(shù)改寫成箭頭函數(shù),但是此時(shí)的this對(duì)象已經(jīng)指向了外層的Window。
考慮到這一點(diǎn)可能不好理解,我們?cè)倏磶讉€(gè)例子:
//例子8 var g = { getThis:function(){ return function(){console.log(this)} } } var h = { getThis:function(){ return ()=> console.log(this) } } g.getThis()()//Window h.getThis()()//h
這個(gè)例子里,g的getThis寫法就和之前的例子3一樣,由于函數(shù)在全局環(huán)境中運(yùn)行,所以此時(shí)this指向Window;h的getThis使用了箭頭函數(shù),所以this指向了外層代碼塊的this所以,此時(shí)this指向的是h。
總結(jié)
一般情況下this對(duì)象指向調(diào)用函數(shù)的對(duì)象,全局環(huán)境中執(zhí)行函數(shù)this對(duì)象指向Window
在call和apply函數(shù)中this指向指定的對(duì)象,如果指定的對(duì)為undefined或者null,那么this對(duì)象指向Window
在箭頭函數(shù)中,this對(duì)象等同于外層代碼塊的this
關(guān)于JavaScript中this對(duì)象如何使用就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。