1. 程式人生 > >js中對this關鍵字的理解

js中對this關鍵字的理解

this是Javascript語言的一個關鍵字。它代表函式執行時,自動生成的一個內部物件,只能在函式內部使用
比如, 理解this指代什麼的關鍵點在與: 看這個this指的是區域性物件還是全域性物件(global)預設在”script”標籤中寫的成員變數和方法都屬於全域性物件(global)所有,global物件其實是不存在的,當js在瀏覽器上應用的時候,window物件是瀏覽器引擎對global物件的封裝,所以在瀏覽器上的全域性物件就是window物件,但在其他應用中就不一定是window物件了。所以當方法 直接在”script”標籤中呼叫和在標籤的屬性中寫都是預設用gloabl物件呼叫,該方式的this都指的是global物件.。在瀏覽器上就指的是window物件了。

function test(){

    this.x = 1;

  }

隨著函式使用場合的不同,this的值會發生變化。但是有一個總的原則,那就是this指的是,呼叫函式的那個物件。

下面分四種情況,詳細討論this的用法。

情況一:純粹的函式呼叫

這是函式的最通常用法,屬於全域性性呼叫,因此this就代表全域性物件Global。

請看下面這段程式碼,它的執行結果是1。


  function test(){

    this.x = 1;

    alert(this.x);

  }

  test(); // 1 

為了證明this就是全域性物件,我對程式碼做一些改變:

 var x = 1;

  function test(){

    alert(this.x);

  }

  test(); // 1 

執行結果還是1。再變一下:

var x = 1;

  function test(){

    this.x = 0;

  }

  test();

  alert(x); //0 

調整如下

情況二:作為物件方法的呼叫

函式還可以作為某個物件的方法呼叫,這時this就指這個上級物件。


  function test(){

    alert(this.x);

  }

  var o = {};

  o.x = 1;

  o.m = test;

  o.m(); // 1 

情況三 作為建構函式呼叫

所謂建構函式,就是通過這個函式生成一個新物件(object)。這時,this就指這個新物件。


  function test(){

    this.x = 1;

  }

  var o = new test();

  alert(o.x); // 1 

執行結果為1。為了表明這時this不是全域性物件,我對程式碼做一些改變:

 var x = 2;

  function test(){

    this.x = 1;

  }

  var o = new test();

  alert(x); //2 

執行結果為2,表明全域性變數x的值根本沒變。 當使用new +方法的形式時,該方法表示的是構造方法,與new關鍵字一起使用,會生成一個物件,js,java物件的建立其實是在建構函式開始執行之前,就是說建構函式執行的時候,被構造的物件其實已經存在了,該物件的屬性都是有預設值的(例如 int 預設0),所以建構函式中可以用this引用當前被構造的物件進行處理(比如 this.name=“Jack”),建構函式的作用就是給建立的物件的預設值賦值成您想要的。

情況四 apply呼叫

apply()是函式物件的一個方法,它的作用是改變函式的呼叫物件,它的第一個引數就表示改變後的呼叫這個函式的物件。因此,this指的就是這第一個引數。

 var x = 0;

  function test(){

    alert(this.x);

  }

  var o={};

  o.x = 1;

  o.m = test;

  o.m.apply(); //0 

apply()的引數為空時,預設呼叫全域性物件。因此,這時的執行結果為0,證明this指的是全域性物件。
如果把最後一行程式碼修改為


o.m.apply(o); //1

執行結果就變成了1,證明了這時this代表的是物件o

通過元素的屬性的方式呼叫函式,此方式this也指全域性物件(global)  用這種方式呼叫函式  預設是通過apply呼叫的,如果不傳遞任何引數預設的是this全域性物件,如果傳遞了引數this就是指定的引數
<script type="text/javascript">


            var id = 2;
            function test(){
                alert(this.id);  //2
            }

        </script>


    </head>

    <body>
        <input type="button" value="anniu" onclick="test()" />
    </body>
此例證明 當客戶端指明是瀏覽器時,全域性物件就是window物件 
<script type="text/javascript">


            var id = 2;
            function test(){
                this.id = 1;
                alert(this.id);
            }
            test();//1
            alert(window.id);//1
        </script>
當this指代全域性物件時,也可用this宣告一個變數。
<script type="text/javascript">
            function test(){
                this.id = 1;
                alert(this.id);
            }
            alert(id);//1
        </script>