javascript的this用法簡單介紹

螞蟻小編發表於2017-03-27

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物件。

相關文章