首頁 > web前端 > js教程 > 深入淺出分析javaScript中this用法_javascript技巧

深入淺出分析javaScript中this用法_javascript技巧

WBOY
發布: 2016-05-16 16:00:03
原創
1228 人瀏覽過

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

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

總得來說 this的指向分為三種。指向全域window,該物件,建構子。

結論:在Javascript中,this指向函數執行時的目前物件。  簡單點說就是呼叫的方法屬於哪個對象,this就指向那個對象。

1. 全域window

簡單程式碼

var message = "this in window";
var printMessage = function(){
  console.info(this === window);
  console.info(this.message);
};
printMessage();
登入後複製

因為呼叫方法printMessage是屬於window的,所以輸出結果為:

true   this in window

現在如果將程式碼改複雜點

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. 該物件

現在看看該物件的,稍微改一下程式碼

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的。

好的再嘔心點,看代碼:

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. 建構子

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做分析。

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程式設計有所幫助。

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