jsにおけるthisキーワードの理解

7843 ワード

thisはJavascript言語のキーワードです.関数が動作する時に自動的に生成される内部オブジェクトを表します.関数の内部でのみ使用できます.例えば、thisが何を指すかを理解するポイントは、このthisを見ると、局部的なオブジェクトですか?それともグローバルオブジェクトですか?デフォルトは「script」タブに書いてあるメンバー変数と方法はすべてグローバルオブジェクト(global)に属します.globalオブジェクトは存在しません.jsがブラウザ上で適用する時、windowオブジェクトはブラウザエンジンのglobalオブジェクトです.したがって、ブラウザ上のグローバルオブジェクトはwindowオブジェクトですが、他のアプリケーションではwindowオブジェクトとは限りません.したがって、メソッドが"script"タブで呼び出される場合と、ラベルの属性で書く場合は、デフォルトではglobalオブジェクトで呼び出されます.この方式の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 
状況三はコンストラクタとして呼び出される.
構造関数とは、この関数を通して新しいオブジェクトを生成することです.このとき、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オブジェクトの建立は、実は構造関数が実行される前に、つまり構造されたオブジェクトが既に存在します.このオブジェクトの属性はデフォルト値があります.したがって、コンストラクタでは、現在構築されているオブジェクトをthis引用して処理することができます.コンストラクタの役割は、作成されたオブジェクトのデフォルト値に値を割り当てることです.
状況四pppy呼び出し
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が対象であることが証明されました.
              ,   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>