JSの中のthis、appy、call

9039 ワード

JavaScript 関数 this

JSのthisは常に一つのオブジェクトを指していますが、具体的にはどのオブジェクトを指していますか?
具体的には、thisの指向を説明します.1.関数を対象とする方法が呼び出された場合、thisはその対象を指します.

    var obj = {
        a: 1,
        getA: function(){
            alert(this === obj); // true
            alert(this.a); // 1
        }
    };
    obj.getA();

難しいところはないようです.他の本を参考にして補足するところがありますか?
2.普通の関数としての呼び出しの前の形式は、関数がオブジェクトの属性として呼び出されていません.関数がオブジェクト属性として呼び出されていない場合、このときのthisは常にグローバルオブジェクトを指しています.ブラウザではwindowオブジェクトがグローバルオブジェクトです.ブラウザではなくグローバルオブジェクトは何ですか?

    window.name = "Stan";
    var getName = function(){
        alert(this.name); // Stan
    };
    getName();

ここではthis.nameを直接nameと書いていますが、違いはありません.なぜですか?また、関数の参照値を変数に割り当てて呼び出します.結果は上記と同じです.次のように

    window.name = "Stan";
    var obj = {
        name: "Stanford",
        getName: function(){
            alert(this.name);
        }
    };
    var pointer = obj.getName;
    pointer(); // Stan

ここでthis.nameを直接nameに変えたら、結果も同じです.上のなぜ解決したのかは、ここで同じです.

    window.name = "Stan";
    var obj = {
        name: "Stanford",
        getName: function(){
            alert(this.name);
        }
    };
    var pointer = obj.getName;
    pointer(); // Stan
    var obj2 ={
        name: "Dance",
        getName2: pointer
    };
    obj2.getName2(); // Dance

前のdemoに基づいて、pointerをget Name 2に割り当てました.そして、Obj 2の対象の属性としてget Name 2を呼び出しました.このときはDanceです.ここではよく分からないことはありませんが、面白いところは、this.nameをnameに換えると、結果Stnとなります.ここでは加thisの前後の違いが見られますが、なぜですか?
「JavaScriptプログラミングの全解」という本の中ではこう解釈されています.

 Java       this，       。                     
         。  JavaScript         this 。          
this.name   name，            name.

また、普通の関数として呼び出せば、結果は違ってきます.下のように上のコードを変更します.

    window.name = "Stan";
    var obj = {
        name: "Stanford",
        getName: function(){
            alert(this.name);
        }
    };
    var pointer = obj.getName;
    pointer(); // Stan
    var obj2 ={
        name: "Dance",
        getName2: pointer
    };
    var pointer2 = obj2.getName2;
    pointer2(); // Stan

thisをプラスしないのに関わらず、この時の結果はすべてStonで、これがどうしてなことを考えてみますか?
まとめてみます.関数が普通の関数として呼び出された場合、プラスとオフの属性は全体のオブジェクトの属性です.関数がオブジェクトの属性として呼び出された場合に、thisを加えない属性が指し示す結果とは違って、thisの属性が付加された場合、この関数のオブジェクトにthisの属性が付加されない場合には、thisはグローバルオブジェクトの属性を指します.
では、thisで関数を呼び出すのは同じです.メソッド内部でメソッドを呼び出した場合、thisを付けないと、グローバル関数で検索されます.

    function func2(){
        alert("global function");
    }
    var obj = {
        name: "Stan",
        func1: function(){
            this.func2();
        },
        func2: function(){
            alert(this.name);
        }
    };
    obj.func1(); // Stan

thisを取れば、結果はglobal functionです.
3.コンストラクタで使っているthisは、new演算子で関数を呼び出すと、この関数は常にオブジェクトに戻ります.通常、コンストラクタの中のthisは、このオブジェクトに戻ります.

        var myClass = function(){
            this.name = "Stan";
        };
        var obj = new myClass();
        alert(obj.name); // Stan

しかし、コンストラクタが明示的にオブジェクトを返すと、今度はそのオブジェクトを返します.

        var myClass = function(){
            this.name = "Stan";
            return {
                name: "Dance"
            }
        };
        var obj = new myClass();
        alert(obj.name); // Dance

しかし、コンストラクタが明示的に任意のデータを返したり、非オブジェクトタイプのデータを返したりしないと、上のような問題は発生しません.
4.appryとcallのthis引用は、関数ごとに2つの非継承的な方法を含む:appy()とcall()の両方の方法の用途は、いずれも特定の作用領域で関数を呼び出すことである.

        window.color = "red";
        var col ={color : "blue"};
        function getCol(){
            alert(this.color);
        }
        getCol.call(this); // red
        getCol.call(window); // red
        getCol.call(col); // blue

コールを使って関数が動作するスコープが拡張されているのが見えます.この問題をもっと見てください.

        <body> ：
        <div id = "list">list</div>
        <js> ：
        document.getElementById('list').onclick = function(){
            alert(this.id); // list
            var func = function(){
                alert(this.id); // undefined
            };
            func();
        };

どうすればいいですか?関数内のthisをコールで修正します.

        document.getElementById('list').onclick = function(){
            alert(this.id); // list
            var func = function(){
                alert(this.id); // undefined
            };
            func.call(this);
        };

func.call()は、前のobj.get Name()のように、関数としての属性で呼び出されます.普通の関数として呼び出されるのではなく、この時のthisは内部のidを指しています.大域のidではなく.
また、applyとcallの作用効果は同じであり、違いは受信した第二のパラメータだけが違っていて、前者は一つのパラメータ配列を受信したので、Arayの例であっても良いし、argmentsオブジェクトであっても良い.一方、両方の最初のパラメータは、その中で関数を実行するスコープである.

ExtJS 3.0 Chartを使ってください.