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>
發佈了22 篇原創文章 · 獲贊 11 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章