javascript this指向簡單介紹
this在javascript中是一個重要的概念,如果對此沒有很好的掌握,那麼在編碼中肯定是舉步維艱。
下面就介紹一下this的指向問題,需要的朋友可以做一下參考。
this的指向總結如下:
(1).有物件就指向呼叫物件。
(2).沒呼叫物件就指向全域性物件。
(3).用new構造就指向新物件。
(4).通過 apply 或 call 或 bind 來改變 this 的所指。
特別說明:在嚴格模式下,this的指向會有所差別,具體可以參閱嚴格模式下this的指向問題簡單介紹一章節。
下面就分別做一下簡單介紹:
一.函式屬於一個物件時,則this指向該物件:
當一個函式屬於一個物件時,那麼此函式中的this就是指向該物件。
程式碼例項如下:
[JavaScript] 純文字檢視 複製程式碼var url="51texiao.cn"; var obj={ url:"softwhy.com" } obj.done=function(){ console.log(this.url); } obj.done();
從上面的程式碼表現可以看出,this是指向obj物件的。
二.函式沒有所屬物件:指向全域性物件:
這一個原則在嚴格模式下有所改變,可以參閱上面的文章。
但是在普通模式下,還是成立的,程式碼例項如下:
[JavaScript] 純文字檢視 複製程式碼var url="51texiao.cn"; var obj={ url:"softwhy.com" }; obj.func=function(){ var foo=function(){ console.log(this.url) console.log(this); }; foo(); return this.url; }; console.log(obj.func());
三.建構函式中的this是指向建立的物件例項:
建構函式中的會指向新建立的物件例項,程式碼如下:
[JavaScript] 純文字檢視 複製程式碼function Antzone(webName,url){ this.webName=webName; this.url=url; } var antzone=new Antzone("螞蟻部落","softwhy.com"); console.log(antzone.url);
關於new運算子的作用可以參閱js new運算子一章節。
四.apply和call呼叫以及bind改變this的指向:
關於上面幾個函式的用法這裡就不多介紹了,具體可以參閱相關閱讀。
(1).apply()和call()可以參閱javascript call()和apply()的作用和區別一章節。
(2).bind()可以參閱javascript bind()一章節。
相關文章
- JavaScript this指向解綁簡單介紹JavaScript
- JavaScript 簡單介紹JavaScript
- 簡單介紹克隆 JavaScriptJavaScript
- javascript物件簡單介紹JavaScript物件
- javascript加密簡單介紹JavaScript加密
- 簡單介紹JavaScript閉包JavaScript
- JavaScript希爾排序簡單介紹JavaScript排序
- javascript constructor簡單介紹JavaScriptStruct
- javascript建立物件簡單介紹JavaScript物件
- javascript的this用法簡單介紹JavaScript
- javascript arguments用法簡單介紹JavaScript
- javascript 變數簡單介紹JavaScript變數
- javascript簡單模板引擎介紹JavaScript
- javascript作用域簡單介紹JavaScript
- jquery回撥函式中this的指向簡單介紹jQuery函式
- JavaScript return語句簡單介紹JavaScript
- javascript鏈式呼叫簡單介紹JavaScript
- javascript除法運算簡單介紹JavaScript
- javascript &&和||運算子簡單介紹JavaScript
- javascript方法過載簡單介紹JavaScript
- javascript遞迴概念簡單介紹JavaScript遞迴
- javascript陣列操作簡單介紹JavaScript陣列
- javascript with()語句用法簡單介紹JavaScript
- javascript匿名函式簡單介紹JavaScript函式
- javascript的in運算子簡單介紹JavaScript
- javascript變數宣告簡單介紹JavaScript變數
- javascript氣泡排序簡單介紹JavaScript排序
- 如何學習javascript簡單介紹JavaScript
- javascript生命週期簡單介紹JavaScript
- javascript變數汙染簡單介紹JavaScript變數
- javascript AMD規範簡單介紹JavaScript
- javascript如何操作iframe簡單介紹JavaScript
- javascript求餘運算簡單介紹JavaScript
- javascript取模運算簡單介紹JavaScript
- javascript關聯陣列簡單介紹JavaScript陣列
- javascript Object型別物件簡單介紹JavaScriptObject型別物件
- javascript記憶體管理簡單介紹JavaScript記憶體
- javascript innerText屬性用法簡單介紹JavaScript