javascriptの中のthis値

8121 ワード

どのようにthisの値を決定しますか? 
this値はすべての関数に渡されます.thisの値は実行時の関数のコンテキストに基づいています.
例えば、グローバルスコープからsayFoo関数を呼び出した場合、thisはwindowオブジェクトを参照し、 myObjectの一つの方法として呼び出されると、thisはmyObjectを引用します.
        var foo = "foo";
        var myObject = { foo: "I am myObject.foo" };

        var sayFoo = function () {
            console.log(this.foo);
        };

        // myObject    sayFoo  ,   sayFoo  
        myObject.sayFoo = sayFoo;
        myObject.sayFoo();//   I am myObject.foo
        sayFoo(); //  foo
ネスト関数でheadオブジェクトをthisキーワードで参照します.
ネスト関数の内部でthisを使用すると、ES 3では、thisが方向を失い、Headオブジェクトを参照します.
例えば、func 2とfunc 3内部のthisが方向を失いました.引用はmyObjectではなく、headの対象です.
var myObject = {
            
            func1: function() {
                console.log(this); //  myObject

                var func2 = function() {
                    console.log(this); //  window,     ,this  window   

                    var func3 = function () {
                        console.log(this);//  window, head  
                    }();
                }();
            }
        };
        myObject.func1();
匿名関数が関数内で呼び出されると、匿名関数内のthis値はheadオブジェクトになります.たとえば:
var foo = {
            func1: function(bar) {
                bar(); //  window,   foo
                console.log(this); //   this    foo       
            }
        };        
        foo.func1(function() {
            console.log(this);
        });
this値宿主関数が別の関数の内部にカプセル化されている場合、または別の関数のコンテキストで呼び出されている場合、this値は常にheadオブジェクトへの参照である.
作用ドメインチェーンを利用してネスト関数問題を研究する.
this値が失われないように、親関数で作用するドメインチェーンを使用して、thisの参照を保持することができます.以下のコードは、that変数とそのスコープを通じて有効な追跡関数コンテキストを示します.
 //                 
        var myObject = {
            myProperty:"I can see the light",
            myMethod: function() {
                var that = this; //myMethod    ,  this  (   myObject)
                var helperFunction = function() { //    
                    //          “I can see the light”
                    console.log(that.myProperty);
                    console.log(this.myProperty);
                    console.log(this);
                }();
            }
        };
        myObject.myMethod();//  myMethod
call()またはappy()を使ってthis値を制御します.
this値は、一般的に呼び出し関数のコンテキストに依存しますが、apply()またはcall()を使ってthis値を書き換えることができます.
call()とappy()の違いは、関数伝達パラメータの方式が違います.
コール()を使うと、パラメータはカンマで区切られた値だけです.
appy()を使用すると、パラメータ値は配列として渡されます. 
例えば、関数内部のthis値をmyObjectをそのコンテキストとしてコールすることによって、次のようになります.
//  call() apply()  this 
        var myObject = {};
        var myFunction = function(parm1, parm2) {
            //       ,  call() this  myObject
            this.foo = parm1;
            this.bar = parm2;
            console.log(this);
        };
         myFunction.call(myObject, "foo", "bar");//    ,  this    myObject
         console.log("foo=" + myObject.foo + ",bar=" + myObject.bar); // foo=foo,bar=bar
直接呼び出しに変更した結果、
       var myObject = {};
        var myFunction = function(parm1, parm2) {
            //       ,  call() this  myObject
            this.foo = parm1;
            this.bar = parm2;
            console.log(this);
        };
        myFunction("foo", "bar");//    ,this  window
        console.log("foo=" + myObject.foo + ",bar=" + myObject.bar);//foo=undefined,bar=undefined
        console.log("foo=" + myFunction.foo + ",bar=" + myFunction.bar);//foo=undefined,bar=undefined
        console.log("foo=" + foo + ",bar=" + bar);//foo=foo,bar=bar
ユーザーがカスタマイズしたコンストラクタ内部でthisキーを使用します.
newキーワードを使って関数を呼び出すと、this値(構造関数で宣言されている)はインスタンス自体を参照します.
例えば、以下のコードでPersonコンストラクターを作成し、Personのインスタンスを作成すると、this.nameは新規作成したオブジェクトを参照します.
       var Person = function(name) {
            this.name = name || "john doe";//this        
        };

        var cody = new Person("Cody Lindley");//  Person        
        console.log(cody.name);//  Cody Lindley
newキーワードでコンストラクタを呼び出すと、thisは「作成するオブジェクト」を参照します.
newキーワードを使用しない場合、this値はPersonを呼び出すコンテキストである.本例ではheadオブジェクトである.次のコード:
        var Person2 = function (name) {
            this.name = name || "john doe"; //this        
        };

        var cody2 = Person2("Cody Lindley"); //  Person        
       console.log(cody2.name); // name   ,   name     window.name 
       console.log(window.name); //  Cody Lindley
プロトタイプメソッド内のthisキーワードは構造関数の例を参照します.
構造関数に追加されたプロトタイプ属性の関数にthisを使用すると、thisは呼び出し方法の例を引用して、例えば、
       //      this           
        var Person = function(x) {
            if (x) {
                this.fullName = x;
            }
        };

        Person.prototype.whatIsMyName = function() {
            return this.fullName;//this  Person()       
        };

        var cody = new Person("cody lindley");
        var lisa = new Person("lisa lindley");

        //     whatIsMyName  ,    this    
        console.log(cody.whatIsMyName(), lisa.whatIsMyName()); //  cody lindley,lisa lindley

        Object.prototype.fullName = "John Doe";
        var john = new Person();
        console.log(john.whatIsMyName());
prototypeオブジェクト内の方法内でthisキーワードを使用する場合、thisは実例を参照するために使用されてもよい.この例に検索する属性が含まれていない場合は、プロトタイプで検索を続けます.