イベント処理関数のthisの指向と関数コンテキストの継承

マーティンのブログから転載
最近プログラムを書くとき、イベント処理関数がバインドされた後、そのイベントバインドのコールバック関数のthisの指向と、その関数がアクセスできる役割ドメインがどのようなものなのかという疑問がずっとあります.今日は暇があってテストをして、まとめました:1.イベント処理関数のバインド後、thisはイベントバインドの要素を指します.2.イベント処理関数がアクセスできる役割ドメイン:バインディングが発生したときのコンテキストが含まれます.

このテスト

このテストは簡単で、htmlコードを書いてthisを出力すれば、thisの指向を検証することができます.私のテストコードは以下の通りです.body onloadはinit関数をトリガし、bodyにonclick関数をバインドし、この関数はthisの値を出力し、結果はbodyノードが出力されることを示した.したがって、イベント処理関数では、thisはバインドされた要素を指し、もちろんbindはthisを修正できる指向である.

    



    
 body onclick 
    
 body
    
 this 
    
        var obj = {
          name:'xiaobo',
          age:'23'
        };
        function init() {
            document.body.onclick = function() {
                console.log(this)//body
            };
        }
        // function init() {
        //     document.body.onclick = function() {
        //         console.log(this)//obj
        //     }.bind(obj);
        // }
    

スコープテスト

jsでは,関数の役割ドメインは内部の関数が外部の関数の役割ドメインにアクセスできることが多く,外部の関数が内部の役割ドメインにアクセスできず,外部の関数の役割ドメインにアクセスできる関数も閉パケットとなる.イベントバインド操作にはDOM 2,DOM 0,IEの方法があり、どの方法を使ってもバインドできますが、私の疑問はバインドされたイベント処理関数が、その役割ドメインがどこなのか、外部関数の役割ドメインにアクセスできるかということです.この点を理解するために、次のテストをしました.

    



    
 body onclick 
    
 body
    
 this 
    
        var obj = {
          name:'xiaobo',
          age:'23'
        };
        function init() {
            var obj2 = {
              name:'xiaobo2',
              age:'25'
            }
            document.body.onclick = function() {
                console.log(obj2);//obj2
                console.log(obj);//obj
            };
        }
        // function init() {
        //     document.body.onclick = function() {
        //         console.log(this)
        //     }.bind(obj);
        // }
    

上記のコードではbody.onclickのイベント処理関数は、init関数で定義するobj 2を出力し、グローバル定義のobjは、いずれも出力可能であり、onclickのコールバック関数がイベントバインディングのコンテキスト、すなわちイベント処理関数(コールバック関数)がイベントバインディングを持つことができる場合のコンテキスト(この例では、イベントはinit関数でバインディングされるので、コールバック関数はinitという役割ドメインを継承し、obj 2にアクセスできる)を同時に、Init自体もグローバルに定義されているので、コールバック関数はグローバル役割ドメインにもアクセスできます.

まとめ

この2つのテストにより,thisの指向とコンテキストの継承が明らかになったが,DOM 0によるイベントバインドの例は上に挙げられているが,DOM 2のイベントコールバックではthisとコンテキストの継承関係はいずれもこのようなものであり,IEではテストは行われていない.IEですか...