深入淺出分析javaScript中this用法

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

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

　　之前學javascript的時候總搞不清this,這個this不像java裡的this那麼好理解。我後來也是看了許多別人寫的文章，才理解過來的。現在把別人寫的東西搬過來，怕以後忘記。

　　總得來說 this的指向分三種。指向全局window,該對象,構造函數。

　　結論：在Javascript中，this指向函數執行時的當前對象。 簡單點說就是調用的方法屬於哪個對象，this就指向那個對象。

　　1. 全局window

　　簡單代碼

　　?

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

　　因為調用方法printMessage是屬於window的，所以輸出結果為:

　　true this in window

　　現在如果將代碼改復雜點

　　?

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

　　此時printMessage方法是屬於window的，所以他的this還是指向window。obj.printMessage 方法是屬於obj對象的，看看下面的分析。

　　所以輸出結果還是為:true this in window

　　2. 該對象

　　現在看看該對象的，稍微改一下代碼

　　?

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

　　結果：

　　false this in obj

　　對的，你想的沒錯 , 還是上一步的結論，obj.printMessage 方法是屬於obj對象的，所以this是指向obj的。

　　好的再嘔心點，看代碼:

　　?

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

　　最終調用的是 obj2.printMessage()，所以執行到this的時候，那個this是obj2

　　結果：

　　false,this in obj2

　　哈哈，是不是和你想的一樣，誰調用的，就指向誰。

　　3. 構造函數

　　?

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

　　結果：

　　age = 1 name = no name。

　　那麼構造函數對this作了什麼呢? 前面講的《深入淺出理解javaScript原型鏈》 有對new做分析。

　　?

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

　　new的過程拆分成以下三步：

　　(1) var p={}; 也就是說，初始化一個對象p

　　(2) p.__proto__ = Person.prototype;

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

　　那麼就來說說call。

　　call 方法

　　應用於：Function 對象

　　調用一個對象的一個方法，以另一個對象替換當前對象。

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

　　參數：

　　thisObj

　　可選項。將被用作當前對象的對象。

　　arg1, arg2, , argN

　　可選項。將被傳遞方法參數序列。

　　說明：

　　call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。如果沒有提供 thisObj 參數，那麼 Global 對象被用作 thisObj。

　　解釋一下，call方法的作用其實是更改默認方法的this指向。調用call方法的肯定是一個方法對象，當調用call，方法對象的this指向會變成call方法的第一個參數，就這麼簡單。

　　var p = new Person();

　　當調用構造函數Person時，可能是通過call來處理，使Person內的this指向了p,this.age = 1 就相當於p.age = 1，這樣就張p添加了age這個屬性。

　　希望本文所述對大家的javascript程序設計有所幫助。