這篇文章主要介紹了javaScript中this用法,實(shí)例分析了javascript中this的用途與相關(guān)的使用技巧,需要的朋友可以參考下

本文實(shí)例講述了javaScript中this用法。分享給大家供大家參考。具體分析如下：

之前學(xué)javascript的時(shí)候總搞不清this,這個(gè)this不像java里的this那么好理解。我后來(lái)也是看了許多別人寫的文章，才理解過(guò)來(lái)的。現(xiàn)在把別人寫的東西搬過(guò)來(lái)，怕以后忘記。

總得來(lái)說(shuō) this的指向分三種。指向全局window,該對(duì)象,構(gòu)造函數(shù)。

結(jié)論：在Javascript中，this指向函數(shù)執(zhí)行時(shí)的當(dāng)前對(duì)象。 簡(jiǎn)單點(diǎn)說(shuō)就是調(diào)用的方法屬于哪個(gè)對(duì)象，this就指向那個(gè)對(duì)象。

1. 全局window

簡(jiǎn)單代碼

1. var message = "this in window"; 
2. var printMessage = function(){ 
3. console.info(this === window); 
4. console.info(this.message); 
5. }; 
6. printMessage(); 

因?yàn)檎{(diào)用方法printMessage是屬于window的，所以輸出結(jié)果為:

true this in window

現(xiàn)在如果將代碼改復(fù)雜點(diǎn)

1. var message = "this in window"; 
2. var printMessage = function(){ 
3. console.info(this === window); 
4. console.info(this.message); 
5. }; 
6. var obj = { 
7. message: 'this in obj', 
8. printMsg : function(){ 
9. printMessage(); 
10. } 
11. }; 
12. obj.printMessage(); 

此時(shí)printMessage方法是屬于window的，所以他的this還是指向window。obj.printMessage 方法是屬于obj對(duì)象的，看看下面的分析。

所以輸出結(jié)果還是為:true this in window

2. 該對(duì)象

現(xiàn)在看看該對(duì)象的，稍微改一下代碼

1. var message = "this in window"; 
2. var printMessage = function(){ 
3. console.info(this === window); 
4. console.info(this.message); 
5. }; 
6. var obj = { 
7. message: 'this in obj', 
8. printMessage : window.printMessage 
9. }; 
10. obj.printMessage(); 

結(jié)果：

false this in obj

對(duì)的，你想的沒(méi)錯(cuò) , 還是上一步的結(jié)論，obj.printMessage 方法是屬于obj對(duì)象的，所以this是指向obj的。

好的再嘔心點(diǎn)，看代碼:

1. var message = "this in window"; 
2. var printMessage = function(){ 
3. console.info(this === window); 
4. console.info(this.message); 
5. }; 
6. var obj = { 
7. message: 'this in obj', 
8. printMessage : function(){ 
9. var obj2 = { 
10. message:'this in obj2', 
11. printMessage: window.printMessage 
12. }; 
13. obj2.printMessage(); 
14. } 
15. }; 
16. obj.printMessage(); 

最終調(diào)用的是 obj2.printMessage()，所以執(zhí)行到this的時(shí)候，那個(gè)this是obj2

結(jié)果：

false,this in obj2

哈哈，是不是和你想的一樣，誰(shuí)調(diào)用的，就指向誰(shuí)。

3. 構(gòu)造函數(shù)

1. var Person = function(){ 
2. this.age = 1; 
3. this.name = 'no name'; 
4. }; 
5. var p = new Person(); 
6. console.info('age = ' + p.age); 
7. console.info('name = ' + p.name); 

結(jié)果：

age = 1 name = no name。

那么構(gòu)造函數(shù)對(duì)this作了什么呢? 前面講的《深入淺出理解javaScript原型鏈》 有對(duì)new做分析。

1. var Person = function(){}; 
2. var p = new Person(); 

new的過(guò)程拆分成以下三步：

(1) var p={}; 也就是說(shuō)，初始化一個(gè)對(duì)象p

(2) p.__proto__ = Person.prototype;

(3) Person.call(p); 也就是說(shuō)構(gòu)造p，也可以稱之為初始化p

那么就來(lái)說(shuō)說(shuō)call。

call 方法

應(yīng)用于：Function 對(duì)象

調(diào)用一個(gè)對(duì)象的一個(gè)方法，以另一個(gè)對(duì)象替換當(dāng)前對(duì)象。

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

參數(shù)：

thisObj

可選項(xiàng)。將被用作當(dāng)前對(duì)象的對(duì)象。

arg1, arg2, , argN

可選項(xiàng)。將被傳遞方法參數(shù)序列。

說(shuō)明：

call 方法可以用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法。call 方法可將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象。如果沒(méi)有提供 thisObj 參數(shù)，那么 Global 對(duì)象被用作 thisObj。

解釋一下，call方法的作用其實(shí)是更改默認(rèn)方法的this指向。調(diào)用call方法的肯定是一個(gè)方法對(duì)象，當(dāng)調(diào)用call，方法對(duì)象的this指向會(huì)變成call方法的第一個(gè)參數(shù)，就這么簡(jiǎn)單。

var p = new Person();

當(dāng)調(diào)用構(gòu)造函數(shù)Person時(shí)，可能是通過(guò)call來(lái)處理，使Person內(nèi)的this指向了p,this.age = 1 就相當(dāng)于p.age = 1，這樣就張p添加了age這個(gè)屬性。

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。