javascript this指向簡單介紹

antzone發表於2017-04-08

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()一章節。

相關文章