探索Javascript中this的奧秘
前言: this 是 JavaScript 比較特殊的關(guān)鍵字,運(yùn)用的地方之廣,方式之靈活奠定了它的強(qiáng)大,但同時(shí)注定了它的難用 。自己剛開(kāi)始學(xué)的時(shí)候被繞的很暈,為了徹底弄懂它查了很多資料。然后將自己學(xué)的東西整理了一下,以通俗易懂的方式表達(dá)出來(lái),權(quán)當(dāng)做學(xué)習(xí)筆記,同時(shí)也可以給有需要的童鞋做下參考^_^
什么是this?
this 關(guān)鍵字的含義是明確且具體的,即指代當(dāng)前對(duì)象。即意味著這個(gè) this 是在某種相對(duì)情況下才成立的。
this 被分為三種情況:全局對(duì)象、當(dāng)前對(duì)象或者任意對(duì)象;判斷處于那種情況,這完全取決于函數(shù)的調(diào)用方式,JavaScript 中主要的函數(shù)調(diào)用有以下幾種方式:
- 作為普通函數(shù)調(diào)用
- 作為對(duì)象方法調(diào)用
- 作為構(gòu)造函數(shù)調(diào)用
- 使用 apply 或 call 調(diào)用
1. 作為普通函數(shù)調(diào)用
------這是我們最常用的方法,這種調(diào)用方式屬于全局調(diào)用,這里的 this 指的是全局對(duì)象
function test(){ this.a = 5; alert(this.a); alert(this); } test(); // 5 [object Window]
如上所示:定義在全局的函數(shù), 函數(shù)的所有者就是當(dāng)前頁(yè)面, 也就是window對(duì)象,所以example()的調(diào)用對(duì)象就是Window,因此這里面的this就代表Window;
換一種寫(xiě)法:
var a = 5; function test(){ var a = 10; alert(this.a); } test(); //5
如上所示:test()函數(shù)內(nèi)部也聲明了一個(gè)變量a,但是調(diào)用test()的結(jié)果為5,說(shuō)明此時(shí)函數(shù)內(nèi)部的this代表了全局對(duì)象即Window;
再換種寫(xiě)法:
var a = 5; function test(){ this.a = 10; } test(); alert(a); //10
如上所示: 調(diào)用test()函數(shù),更改了全局變量a的值,即表明此時(shí)this代表全局對(duì)象。
2.作為對(duì)象函數(shù)的調(diào)用
------當(dāng)函數(shù)被某個(gè)對(duì)象調(diào)用時(shí),此時(shí)this就指向了這個(gè)對(duì)象
var name="張三"; var person={ name:"李四", showName:function(){ alert(this.name); } } person.showName(); //輸出 李四 var other=person.showName; other(); //輸出 張三
如上所示:執(zhí)行 person.showName()的結(jié)果為 李四,說(shuō)明此時(shí)showName中的this指向了person;
而把person.showName賦給other后,因?yàn)閛ther屬于全局變量,可以看成是window對(duì)象的一個(gè)屬性。所以當(dāng)調(diào)用other(),相當(dāng)于調(diào)用window.other(),因此this指向了window, 輸出結(jié)果為 張三;
所以說(shuō)作為函數(shù)對(duì)象調(diào)用時(shí),this就指向了這個(gè)調(diào)用的對(duì)象。
3. 作為構(gòu)造函數(shù)調(diào)用
------構(gòu)造函數(shù),就是通過(guò)這個(gè)函數(shù)生成一個(gè)新對(duì)象(object),這時(shí)候的 this 就會(huì)指向這個(gè)新對(duì)象;
function animal(){ this.name = "豆豆"; } var dog = new animal(); alert(dog.name); // 輸出 豆豆
如上所示:通過(guò)new關(guān)鍵字生成一個(gè)object類(lèi)型的對(duì)象并把它賦給dog,執(zhí)行這個(gè)構(gòu)造函數(shù)的話,會(huì)吧構(gòu)造函數(shù)作用域里的this指向這個(gè)對(duì)象,在這里就是指向了dog,因此this.name 等同于dog.name, 所以輸出結(jié)果為豆豆。
4.使用 apply 或 call 調(diào)用
------apply()是函數(shù)對(duì)象的一個(gè)方法,它應(yīng)用某一對(duì)象的一個(gè)方法,用另一個(gè)對(duì)象替換當(dāng)前對(duì)象。
var a = "張三"; function test(){ alert(this.a); } var b = {}; b.a = "李四"; b.n = test; b.n(); //李四 b.n.apply(); //張三 b.n.apply(b); //李四
如上所示:b.n()----因?yàn)檎{(diào)用的對(duì)象為b,所以this指向了b,this.a == b.a ,所以結(jié)果為李四;
b.n.apply----當(dāng)apply()的參數(shù)為空時(shí),就是沒(méi)有對(duì)象去替換當(dāng)前對(duì)象,默認(rèn)用全局對(duì)象,所以this指向window,結(jié)果為張三;
b.n.apply(b)----指將當(dāng)前的this指向替換成b,因此this指向了b,結(jié)果為李四
(本文參考了網(wǎng)上的資料和一些書(shū)籍,如有錯(cuò)誤之處,歡迎指出,將及時(shí)改正,么么噠O(∩_∩)O)
總結(jié):本文介紹了 JavaScript 中的 this 關(guān)鍵字在各種情況下的含義,實(shí)例都很簡(jiǎn)單,這樣更能有助于加深理解。雖然這只是 JavaScript 中一個(gè)很小的概念,但借此我們可以了解 JavaScript 中函數(shù)的執(zhí)行環(huán)境,充分掌握this的相關(guān)知識(shí)有助于我們?cè)诰帉?xiě)面向?qū)ο蟮腏avaScript程序時(shí)能夠游刃有余。最后,感謝您的觀看。
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家
- 實(shí)例淺析js的this
- Javascript中this綁定的3種方法與比較
- JavaScript中this的四個(gè)綁定規(guī)則總結(jié)
- 幾句話帶你理解JS中的this、閉包、原型鏈
- javascript this詳細(xì)介紹
- 學(xué)習(xí)掌握J(rèn)avaScript中this的使用技巧
- JavaScript中的this使用詳解
- 老生常談 js中this的指向
- 再次談?wù)揓avascript中的this
- JavaScript的this關(guān)鍵字的理解
- 聊一聊JS中this的指向問(wèn)題
- JS中改變this指向的方法(call和apply、bind)
- JavaScript中的this,call,apply使用及區(qū)別詳解
相關(guān)文章
用JavaScript 處理 URL 的兩個(gè)函數(shù)代碼
用JavaScript 處理 URL 的兩個(gè)函數(shù)代碼...2007-08-08基于zepto.js實(shí)現(xiàn)仿手機(jī)QQ空間的大圖查看組件ImageView.js詳解
這篇文章主要介紹了基于zepto.js實(shí)現(xiàn)仿手機(jī)QQ空間的大圖查看組件ImageView.js的源碼和使用方法,并附上一個(gè)使用ImageView.js的實(shí)例,這里分享給大家,有需要的小伙伴參考下。2015-03-03微信小程序?qū)W習(xí)筆記之目錄結(jié)構(gòu)、基本配置圖文詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之目錄結(jié)構(gòu)、基本配置,結(jié)合實(shí)例形式詳細(xì)分析了微信小程序的相關(guān)注冊(cè)、配置及基本使用方法,并配以圖片加以說(shuō)明,需要的朋友可以參考下2019-03-03基于SpringMVC+Bootstrap+DataTables實(shí)現(xiàn)表格服務(wù)端分頁(yè)、模糊查詢(xún)
這篇文章主要介紹了基于SpringMVC+Bootstrap+DataTables實(shí)現(xiàn)表格服務(wù)端分頁(yè)、模糊查詢(xún)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10next.js初始化參數(shù)設(shè)置getServerSideProps應(yīng)用學(xué)習(xí)
這篇文章主要為大家介紹了next.js初始化參數(shù)設(shè)置getServerSideProps的應(yīng)用示例學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10JS實(shí)現(xiàn)側(cè)邊欄鼠標(biāo)經(jīng)過(guò)彈出框+緩沖效果
本文主要介紹了JS實(shí)現(xiàn)側(cè)邊欄鼠標(biāo)經(jīng)過(guò)彈出框+緩沖效果的實(shí)現(xiàn)原理與方法步驟。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-03-03實(shí)現(xiàn)非常簡(jiǎn)單的js雙向數(shù)據(jù)綁定
Angular實(shí)現(xiàn)了雙向綁定機(jī)制。所謂的雙向綁定,無(wú)非是從界面的操作能實(shí)時(shí)反映到數(shù)據(jù),數(shù)據(jù)的變更能實(shí)時(shí)展現(xiàn)到界面。本文給大家詳細(xì)介紹js雙向數(shù)據(jù)綁定,感興趣的朋友參考下2015-11-11