JavaScript中的this到底是什么(一)
對于常年使用C++,C#,Java等這些面向?qū)ο笳Z言的程序員來說,幾乎天天都和this打交道。在這些語言里,this含義非常明確,就是指向當(dāng)前的對象實(shí)例,我們用起來也是相當(dāng)?shù)姆判?。然而,到了JavaScript這個(gè)動態(tài)語言里,this的寫法沒變,但是其含義卻大大地不同了,下面用實(shí)例說明,使用瀏覽器為Firefox14.0.1.
首先,Hello World o(^▽^)o
本人從剛開始自學(xué)javascript這門靈活的編程語言到現(xiàn)在,也有一年多的時(shí)間了。
在這一年多的時(shí)間里,這門語言所帶給我的不僅是高額的工作回報(bào),還有很多意想不到的驚喜,讓我這樣一個(gè)藝術(shù)生領(lǐng)略編程的魅力。
從今天開始,準(zhǔn)備每周一更我的博客,不止是分享,更是勉勵(lì)自己。
OK,我們進(jìn)入今天的主題,今天我們來談?wù)刯avascript里面一個(gè)比較特殊的對象:this
接觸過其他面向?qū)ο蟮木幊陶Z言(如:java,C,C++等)的小伙伴們可能對this非常熟悉。
不過它在javascript當(dāng)中為什么會經(jīng)常性的給我們造成很多麻煩呢?
我們先來說說他與其他編程語言的不同
在javascript里面,this是一個(gè)特殊的對象,它不像其他編程語言那樣,是存儲在實(shí)例中的值,直接指向此實(shí)例。
而是作為一個(gè)單獨(dú)的指針,在不同的情況之下,指向不同的位置,這也是為什么我們會將它搞混的原因。
下面我們來看下,它在不同情況下分別是怎樣一種形態(tài)
1.在全局作用域時(shí):
這個(gè)是最好理解的,即在全局作用域下this指向window,也就是在全局作用域下,this與window是等價(jià)的:
console.log(this === window); //true
另外,由于在此時(shí),this等價(jià)于window,所以我們在全局作用域聲明的變量也會指向this:
var x = 1; console.log(this.x);//1 console.log(window.x);//1
當(dāng)然,我們還有另一種聲明變量的方法:
x = 0; function setNum(){ x = 1; }; console.log(this.x);//0 setNum(); console.log(this.x);//1
當(dāng)聲明變量時(shí)不使用 var 或者 let的話 此時(shí)相當(dāng)于給全局的this添加或者改變屬性值
看起來還是很簡單的,不就是個(gè)等價(jià)于window的對象么。
當(dāng)然,如果僅僅是這樣,this或許根本就沒有存在的必要了。
而this最讓人頭疼的部分就是它在不同的作用域下,它的形態(tài)也是截然不同的
2.當(dāng)在函數(shù)中時(shí):
到這里時(shí),this的陷阱已經(jīng)漸漸顯露出來了
這里為什么說是當(dāng)在函數(shù)中而不是局部作用域時(shí),要講這個(gè),首先我們要清楚function是什么
在javascript中,function作為js中的一個(gè)特殊對象:函數(shù),是有著不同的形態(tài)的
我們通??吹降模?br />
function set(){ var x = 0; };
在這一形態(tài)下,其內(nèi)部的this是與全局作用域時(shí)一樣,直接指向window,所以其形態(tài) 依然等價(jià)于window。
var x = 0; function num(){ this.x = 1; } console.log(this.x);//0 num(); console.log(this.x);//1
這里就是經(jīng)常容易犯得錯(cuò)誤,很多人覺得,當(dāng)this已經(jīng)在一個(gè)function之中時(shí),其目前所處位置為當(dāng)前的局部作用域,所以目前指向的應(yīng)該是此函數(shù)
但是,如果你將這個(gè)函數(shù)實(shí)例化(new)之后,此函數(shù)將生成一個(gè)全新的環(huán)境,此時(shí)在此實(shí)例中的this也會隨之發(fā)生變化,它將指向所在實(shí)例。
num = "0"; function setThis(){ this.num = "1"; } console.log(this.num);//"0" new setThis(); console.log(this.num);//"0" console.log(new setThis().num);//1
這是因?yàn)?,?dāng)實(shí)例化之后,此函數(shù)變成了一個(gè)實(shí)例對象,而其內(nèi)部的this也自然而然的指向了此實(shí)例對象,如同一開始的this是指向window的對象一樣指向了它所在的實(shí)例
另外,在我們寫javascript的時(shí)候,我們通常還會有一種調(diào)用函數(shù)的方法,即為元素綁定事件,比如button.addEventListener(‘click', fn, false)等,如果在fn里面需要使用到this的話,那么此時(shí)this指向事件處理元素,也就是button
注意:this作為關(guān)鍵字,你是無法復(fù)寫它的。
不知不覺,寫的也好多了,其實(shí)this還有更多的形態(tài),比如prototype,比如在html中,比如在dom事件處理程序里,由于篇幅過長,這里就不再繼續(xù)進(jìn)行敖述,下回我會講到在prototype中的this
this在我的理解中作為一個(gè)指針,相應(yīng)的它在prototype原型鏈中會有更重要的地位,不過不在我們今天的范圍之內(nèi),暫不做過多的解釋
以后基本會每周一更吧,作為javascript的新手,也希望寫的東西可以跟更多人分享,更希望從大家的思想中總結(jié)更多的經(jīng)驗(yàn)!
關(guān)于JavaScript中的this到底是什么(一),每周一都會給大家更新的,作為javascript的新手,希望寫的東西可以和身邊的朋友分享,更希望互相交流學(xué)習(xí)經(jīng)驗(yàn)。謝謝!
- Javascript this關(guān)鍵字使用分析
- javascript this用法小結(jié)
- JAVASCRIPT THIS詳解 面向?qū)ο?/a>
- Javascript this指針
- 有關(guān)js的變量作用域和this指針的討論
- js報(bào)錯(cuò) Object doesn''t support this property or method的原因分析
- Javascript this 的一些學(xué)習(xí)總結(jié)
- javascript中onclick(this)用法介紹
- JavaScript中幾個(gè)重要的屬性(this、constructor、prototype)介紹
- js中的this關(guān)鍵字詳解
- JS中的this變量的使用介紹
- javascript中的self和this用法小結(jié)
- js this函數(shù)調(diào)用無需再次抓獲id,name或標(biāo)簽名
- 深入理解Javascript中this的作用域
相關(guān)文章
使用Cookies保存網(wǎng)站歷史瀏覽記錄實(shí)例代碼
仿淘寶網(wǎng)的最近瀏覽記錄功能,喜歡的朋友可以參考下。2010-07-07簡略的前端架構(gòu)心得&&基于editor為例子的編碼小技巧
這一陣事情有點(diǎn)多,沒來的及更新神馬東西。今天分享兩個(gè)ppt吧。主要內(nèi)容是關(guān)于一些編碼的小技巧,另一個(gè)關(guān)于前端架構(gòu)的一些些東西。2010-11-11JavaScript判斷圖片是否已經(jīng)加載完畢的方法匯總
在網(wǎng)上有很多關(guān)于判斷圖片是否已經(jīng)加載完畢的文章,但是有的瀏覽器并不適合,下面小編給大家分享一些有關(guān)JavaScript判斷圖片是否已經(jīng)加載完畢的方法匯總,需要的朋友參考下2016-02-02用js的document.write輸出的廣告無阻塞加載的方法
這篇文章主要介紹了用js的document.write輸出的廣告無阻塞加載的方法,需要的朋友可以參考下2014-06-06原生js實(shí)現(xiàn)電商側(cè)邊導(dǎo)航效果
本文主要分享了原生js實(shí)現(xiàn)電商側(cè)邊導(dǎo)航效果的示例代碼以及原理分析。具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01js 實(shí)現(xiàn)css風(fēng)格選擇器(壓縮后2KB)
近日在做一些OA前端界面,為了更好管理頁面代碼想寫個(gè)js選擇器,寫著寫著發(fā)現(xiàn)很費(fèi)力,索性在網(wǎng)上找找看,功夫不負(fù)有心人, 找到一個(gè)mini css選擇器,且性能不凡:以下代碼是壓縮后的,僅2KB2012-01-01淺析JS中的 map, filter, some, every, forEach, for in, for of 用法總
本文是小編給大家總結(jié)的關(guān)于javascript中的map, filter, some, every, forEach, for in, for of 用法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-03-03