Javascript解析之this代表物件及作用範圍

一．              This物件的概述

在javascript程式設計中，我們經常用到this關鍵字，但有時也經常被它搞得頭暈，下面將說明this的作用範圍與以及它所指代的物件。

This特指當前物件，所有通過this.attr賦予的屬性，都屬於當前物件；那當前物件是什麼呢，它的作用範圍又是什麼呢，在不同情況下，this物件的表現形式各不相同，下面就講講我對this物件的理解。

 

二．             This所指代的物件

 

1．  對於javascript，它的編寫方式比較隨意，但擴充套件性很強，我們可以使用程式導向的編寫方式，也可以使用物件導向的編寫方式，在這兩種編寫方式下，this的表現形式是不同的，下面我們先看一下定義變數的一些方式。

下面我們看一個示例（這是一個程式導向的呼叫方式，先不急於看結果，你可以自己想一下執行結果該是什麼）：

function test(){

    var1=100;

    var var2=100;

    this.var3=100;

    f1=function(){}

    var f2=function(){}

    function f3(){}

    this.f4=function(){}

}

test();

alert(typeof  var1);

alert(typeof  var2);

alert(typeof  var3);

alert(typeof  f1);

alert(typeof  f2);

alert(typeof  f3);

alert(typeof  f4);

 

//======以下是上面的執行結果======

1.number

2.undefined

3.number

4.function

5.undefined

6.undefined 上面f2的寫法等價於f3的寫法

7.function

解析：我們可以把window看成一個大物件，它是Window物件的例項化，我們編寫的所有javascript程式碼都包含在該物件內，因此，當前物件this特指window例項。

1.  alert(typeof  var1);//number

var1是一個未明確定義的變數，根據作用域範圍定義，該物件屬於window例項的物件，它的作用範圍為全域性。

2.  alert(typeof  var2);//undefined

var2是一個明確定義的變數，根據作用域範圍定義，該物件的作用域範圍為函式級別，即test函式所屬範圍，因此不可訪問。

3.  alert(typeof  var3);

var3是以物件屬性的方式定義的，但是test呼叫的時候卻是以過程的方式呼叫，也就是說test沒有被例項化成物件，並且test屬於window物件，那麼當前物件this仍然是window，所以var3屬性是屬於window的。

4.  alert(typeof  f1);

f1函式與var1變數同理

5.  alert(typeof  f2);

f2函式與var2變數同理

6.  alert(typeof  f3);

f3函式與var2變數同理

7.  alert(typeof  f4);

f4函式與var3變數同理

//===============================

 

下面是一個物件導向的呼叫示例：

function test(){

    var1=100;

    var var2=100;

    this.var3=100;

    f1=function(){}

    var f2=function(){}

    function f3(){}

    this.f4=function(){}

}

t = new test();

alert(typeof  var1);

alert(typeof  var2);

alert(typeof  var3);

alert(typeof  t.var3);

alert(typeof  f1);

alert(typeof  f2);

alert(typeof  f3);

alert(typeof  f4);

alert(typeof  t.f4);

//======以下是上面的執行結果======

1．  Number

2．  Undefined

3．  Undefined

4．  Number

5．  Function

6．  Undefined

7．  Undefined

8．  Undefined

9．  Function

解析：這次test是使用物件導向的方式呼叫的，下面我們看一下，為何執行結果會是如此：

1．  alert(typeof  var1);還是作用域的問題，未明確定義為全域性變數

2．  alert(typeof  var2);明確定義，為函式級別變數

3．  alert(typeof  var3);

因為test當前是使用物件導向的方式呼叫的，那麼test物件中的當前物件為例項化的test，即this已經不是window物件了，而是test的例項化t

4．  alert(typeof  t.var3);

由上面解析可知，var3屬於物件t，那麼自然可以獲得此變數

5．  alert(typeof  f1);同理var1

6．  alert(typeof  f2);同理var2

7．  alert(typeof  f3);同理var2

8．  alert(typeof  f4);同理var3

9．  alert(typeof  t.f4);同理var3

 

三．             This的操作與修改

上面我們瞭解了一下this指代的物件和作用範圍，但實際上this是可以被指定修改的，我們可以通過call,apply等函式指定當前函式的this物件，通常這些函式也用於繼承的實現。

如上面的函式通過call來呼叫指定this 物件，將獲得完全不同的執行結果，以下我們通過call實現了javascript的繼承。

function f1(){

    this.age=27;

}

function test(){

    f1.call(this);

    this.address='地址';

}

t=new test();

alert(t.age);

alert(t.address);

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/23071790/viewspace-701880/，如需轉載，請註明出處，否則將追究法律責任。