javascript的this用法簡單介紹
this是javascript的一個重點概念,也是一個不大不小的難點,它的指向問題往往會給很多初學者帶來很大的困擾。
下面就通過程式碼例項介紹一下this到底是指向誰,希望能夠給需要的朋友帶來一定的幫助。
在介紹this之前我們先直接給this的指向下個結論:this永遠指向呼叫它所在函式的物件。
[JavaScript] 純文字檢視 複製程式碼var antzone="螞蟻部落"; function done(){ console.log(this.antzone) } done()
上面的程式碼的輸出值為"螞蟻部落",下面介紹一下原因:
在<script></script>標籤根下定義的變數和函式可以認為是為window物件新增的屬性或者方法,所以var antzone="螞蟻部落"相當於window.antzone="螞蟻部落",函式也是同樣的道理,看如下程式碼:
[JavaScript] 純文字檢視 複製程式碼var antzone="螞蟻部落"; function done(){ console.log(this.antzone) } console.log(window.antzone==antzone); console.log(window.done==done);
所以done()函式的執行就相當於window.done(),那麼呼叫此函式的物件就是window,this也就指向window,this.antzone也就相當於window.antzone,所以輸出內容為"螞蟻部落"。再來看一段程式碼:
[JavaScript] 純文字檢視 複製程式碼var obj=new Object(); obj.antzone="分享互助"; var antzone="螞蟻部落"; function done(){ console.log(this.antzone) } obj.func=done; done(); obj.func();
上面程式碼的輸出值分別是"螞蟻部落"和"分享互助"。
done()函式的呼叫物件是window,那麼this指向window。
obj.func=done是將函式done賦值給obj物件的一個屬性,也就是說obj.func屬性存放的是指向done函式物件的引用,所以obj.func()就是obj物件呼叫此函式,那麼this就是指向obj的。再來看一段程式碼例項:
[JavaScript] 純文字檢視 複製程式碼var antzone="螞蟻部落" function a(){ function b(){ console.log(this.antzone) } b() } a()
在上面的程式碼中,函式b()宣告在函式a()的內部,並不是在<script></script>標籤根下宣告的,也沒有賦值給其他任何物件的屬性,這個時候它並不是window物件的函式,但是呼叫它的時候內部this指向window物件。
相關文章
- javascript arguments用法簡單介紹JavaScript
- javascript的分號(;)用法簡單介紹JavaScript
- javascript with()語句用法簡單介紹JavaScript
- javascript innerText屬性用法簡單介紹JavaScript
- javascript call()函式用法簡單介紹JavaScript函式
- javascript trim()函式用法簡單介紹JavaScript函式
- javascript的逗號運算子的用法簡單介紹JavaScript
- javascript中的就加號+的用法簡單介紹JavaScript
- javascript的clientLeft和clientTop屬性用法簡單介紹JavaScriptclient
- javascript陣列的map()函式用法簡單介紹JavaScript陣列函式
- JavaScript 簡單介紹JavaScript
- jQuery filter() 用法簡單介紹jQueryFilter
- js WebSocket用法簡單介紹JSWeb
- onerror事件用法簡單介紹Error事件
- 簡單介紹克隆 JavaScriptJavaScript
- javascript物件簡單介紹JavaScript物件
- javascript this指向簡單介紹JavaScript
- javascript加密簡單介紹JavaScript加密
- angularJS的router用法簡單介紹AngularJS
- javascript的in運算子簡單介紹JavaScript
- <input type="number" >用法簡單介紹
- css 註釋用法簡單介紹CSS
- style.cssText用法簡單介紹CSS
- outerHTML屬性用法簡單介紹HTML
- js isNaN函式的用法簡單介紹JSNaN函式
- js中大括號{}的用法簡單介紹JS
- jQuery的index()函式用法簡單介紹jQueryIndex函式
- js eval()函式的用法簡單介紹JS函式
- div和span元素的用法簡單介紹
- meta標籤的viewport用法簡單介紹View
- 簡單介紹JavaScript閉包JavaScript
- JavaScript希爾排序簡單介紹JavaScript排序
- javascript constructor簡單介紹JavaScriptStruct
- javascript建立物件簡單介紹JavaScript物件
- javascript 變數簡單介紹JavaScript變數
- javascript簡單模板引擎介紹JavaScript
- javascript作用域簡單介紹JavaScript
- CSS3 calc()用法簡單介紹CSSS3