首頁 > web前端 > js教程 > JavaScript中的this到底是什麼(一)_javascript技巧

JavaScript中的this到底是什麼(一)_javascript技巧

WBOY
發布: 2016-05-16 15:26:57
原創
1449 人瀏覽過

對於常年使用C ,C#,Java等這些物件導向語言的程式設計師來說,幾乎天天都和this打交道。在這些語言裡,this意義非常明確,就是指向目前的物件實例,我們用起來也是相當的放心。然而,到了JavaScript這個動態語言裡,this的寫法沒變,但是其意義卻大大地不同了,下面用實例說明,使用瀏覽器為Firefox14.0.1.

首先,Hello World o(^▽^)o

本人從剛開始自學javascript這門靈活的程式語言到現在,也有一年多的時間了。

在這一年多的時間裡,這門語言所帶給我的不僅是高額的工作回報,還有很多意想不到的驚喜,讓我這樣一個藝術生領略編程的魅力。

從今天開始,準備每週一更我的博客,不止是分享,更是勉勵自己。

OK,我們進入今天的主題,今天我們來談談javascript裡面一個比較特殊的對象:this

接觸過其他物件導向的程式語言(如:java,C,C 等)的朋友可能對this非常熟悉。

不過它在javascript當中為什麼會經常性的給我們造成很多麻煩呢?

我們先來談談他與其他程式語言的不同

在javascript裡面,this是一個特殊的對象,它不像其他程式語言那樣,是儲存在實例中的值,直接指向此實例。

而是作為一個單獨的指針,在不同的情況之下,指向不同的位置,這也是為什麼我們會將它搞混的原因。

下面我們來看下,它在不同情況下分別是怎樣一種形態

 1.全域作用域時:

這是最好理解的,即在全域作用域下this指向window,也就是在全域作用域下,this與window是等價的:

console.log(this === window); //true
登入後複製

 另外,由於在此時,this等價於window,所以我們在全域作用域宣告的變數也會指向this:

var x = 1;
console.log(this.x);//1
console.log(window.x);//1
登入後複製

當然,我們還有另一種宣告變數的方法:

x = 0;
function setNum(){
x = 1;
};
console.log(this.x);//0
setNum();
console.log(this.x);//1
登入後複製

當宣告變數時不使用 var 或 let的話 此時相當於給全域的this新增或改變屬性值

看起來還是很簡單的,不就是個等價於window的對象麼。

當然,如果只是這樣,this或許根本就沒有存在的必要了。

而this最讓人頭痛的部分就是它在不同的作用域下,它的形態也是截然不同的

 2.當在函數中時:

 到這裡時,this的陷阱已經漸漸顯露出來了

 這裡為什麼說是當在函數中而不是局部作用域時,要講這個,首先我們要清楚function是什麼

在javascript中,function作為js中的一個特殊物件:函數,是有著不同的形態的

我們通常看到的:

function set(){
  var x = 0;
};
登入後複製

在這個形態下,其內部的this是與全域作用域時一樣,直接指向window,所以其形態 依然等價於window。

var x = 0;
function num(){
  this.x = 1;
}
console.log(this.x);//0
num();
console.log(this.x);//1
登入後複製

 這裡就是常常容易犯得錯誤,很多人覺得,當this已經在一個function之中時,其目前所處位置為當前的局部作用域,所以目前指向的應該是此函數 

但是,如果你將這個函數實例化(new)之後,此函數將產生一個全新的環境,此時在此實例中的this也會隨之發生變化,它將指向所在實例。

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


登入後複製

這是因為,當實例化之後,此函數變成了一個實例對象,而其內部的this也自然而然的指向了此實例對象,如同一開始的this是指向window的對像一樣指向了它所在的實例

另外,在我們寫javascript的時候,我們通常還會有一種呼叫函數的方法,即為元素綁定事件,例如button.addEventListener('click', fn, false)等,如果在fn裡面需要使用this的話,那麼此時this指向事件處理元素,也就是button

注意:this作為關鍵字,你是無法重寫它的。

不知不覺,寫的也好多了,其實this還有更多的形態,比如prototype,比如在html中,比如在dom事件處理程序裡,由於篇幅過長,這裡就不再繼續進行敖述,下回我會講到prototype中的this

this在我的理解中作為一個指針,相應的它在prototype原型鏈中會有更重要的地位,不過不在我們今天的範圍之內,暫不做過多的解釋

以後基本上會每週一更吧,作為javascript的新手,也希望寫的東西可以跟更多人分享,更希望從大家的思想中總結更多的經驗!

關於JavaScript中的this到底是什麼(一),每週一都會給大家更新的,作為javascript的新手,希望寫的東西可以和身邊的朋友分享,更希望互相交流學習經驗。謝謝!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板