thisオブジェクトを深く理解する

thisの定義
JavaScriptでthisは関数が動作する時に自動的に生成される内部オブジェクトの一つを表しています.関数の内部でのみ使用できます.以下は簡単な例です.

function test(){
     
    alert(this == window);
}
test();

code 1は時々thisの使い方が多くの人にとってはよくわからないと思いますが、まとめて言えば this です.次は5つの方面に分けてthisを紹介します.
1.関数コール(windowを指す)
私たちは普段関数を定義して呼び出します.windowオブジェクトを指しています.上記のように関数testを定義してから呼び出します.実際にtestメソッドを呼び出すのはwindowオブジェクトです.この時のthisはwindowを指すので、下のコードで試してみます.

        var a = 'out';
        function test(){
     
            alert(this.a);
        }
        test();  //out
        var t = new test();
        alert(t.a);// undefined undefined

2.コンストラクタとして呼び出す
これは新しいオブジェクトを指していますが、この例は上で取り上げられています.以下は上の場所、つまりtestの関数に . / を加えるだけで、出力の結果は違ってきます.以下のコードを見てください.

        var a = 'out';
        function test(){
     
            this.a = a;
            alert(this.a);
        }
        test();  //out
        var t = new test();
        alert(t.a);// out out

第一の対象はwindowの第二の対象はt(testの実例化)という対象を指します.
3.オブジェクトとしてのメソッド呼び出し
関数はまた、あるオブジェクトの方法として呼び出すことができます.このときthis.a=aは、この上位のオブジェクトです.

        function test(){
     
            alert(this.x);
        }
        var o = {};
        o.x=1;
        o.m=test;
        o.m();  //1
        //o.m=test();  //undefined

4.元素としてのノード
今回はまずコードを見ます.

        var value = 'nihao';
        function f1(){
     
            alert(this.value);
        }
        var val = document.getElementById('email');
        val.onclick=f1;

次は一行のHTMLコードです.

<input id="email" type="text" />

thisをクリックした後、私たちはポップアップが私たちが入力した値であって、windowオブジェクトの「nihao」ではないことを確認します.これは各取得したDOM要素も対象です.
5.call()とappy()
この二つの関数の役割は同じ文法です.彼の役割は関数を変えたコールオブジェクトです.彼の最初のパラメータは変更後の呼び出しの対象を表します.次のコードを見てください.

    var name="helios";
    function setName(addr,weight){
     
        console.log(this.name+'---'+addr+'---'+weight);
        console.log('wancheng');
    }
    var cat = {name:'hei',age:12},
        dog = {name:'gou'};
    setName.call(dog,'shangsha',32);
    setName.apply(cat,['beijing',21]);

input方法の最初のパラメータ伝達は、この方法のオブジェクトを呼び出すthis指向(上の例ではsetNameのthis指向dog)であり、後には、実際のパラメータcall()である複数のパラメータがあり得る.全部で2つのパラメータの最初のパラメータとapply()方法が同じであり、最初のパラメータは実際のパラメータの配列である.
予期せぬ効果
thisの主な応用前に紹介しましたが、thisを使う時、初心者はcallを使いやすいです.

    var obj={
        bar:"yuansu",
        foo:function(){
     
            (function(){
     
                alert(this.bar);//  this   window      undefined；
            })()
        }
    }
    obj.foo();

ここでまず一つの誤差を指摘したいのですが、関数で定義された関数ではなく、thisは前のレベルの関数のthisを指しています.これは正しくありません.関数で定義された関数も誰が呼び出されたのかを見ます.ここでは、Objではなく、fooの中の匿名関数を呼び出します.実はthisです.予想される効果値を達成するためにコードを少し変更すればいいです.下記のコードを見てください.

    var obj={
        bar:"yuansu",
        foo:function(){
     
            var self = this;  // obj     self    
            (function(){
     
                alert(self.bar);//   self  obj 
            })()
        }
    }
    obj.foo();

締め括りをつける
呼び出し形式
this指向
一般関数
window
構造関数
インスタンス化されたオブジェクト
オブジェクトの方法
このオブジェクト
DOMノード
ノードオブジェクト
callまたはappy
最初のパラメータ