JavaScript中的this的指代對象詳解


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

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

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

 1.在全局作用域時:

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

?
1
console.log( this === window); //true

 另外,由於在此時,this等價於window,所以我們在全局作用域聲明的變量也會指向this:

?
1
2
3
var x = 1;
console.log( this .x); //1
console.log(window.x); //1

當然,我們還有另一種聲明變量的方法:

?
1
2
3
4
5
6
7
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中的一個特殊對象:函數,是有着不同的形態的

我們通常看到的:

?
1
2
3
function set(){
   var x = 0;
};

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

?
1
2
3
4
5
6
7
var x = 0;
function num(){
   this .x = 1;
}
console.log( this .x); //0
num();
console.log( this .x); //1

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

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

?
1
2
3
4
5
6
7
8
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作為關鍵字,你是無法復寫它的。

 

3.總結:

1. 在全局作用域中(所有函數外)出現的this,指全局對象。
在瀏覽器中就是window對象。

2. 在函數內部出現的this,指什么要看這個this所在的函數的被調用方式。
不論這個this出現在什么樣的函數中,層次有多深,結構多復雜,只要看直接包含它的函數即可。例如:

(1) 被直接調用時,this指全局對象window。
    func(); 
(2) 被作為構造函數調用時,this指當前正在構建的對象。
    new func(); 
(3) 被作為某個對象A的方法調用時,this指方法所屬的對象A。
    A.func(); 
(4) 使用函數的apply或call方法調用時,this指第一個參數B。
    func.apply(B, [m, n, ...]); func.call(B, m, n, ...);



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM