02.thisの語法

3804 ワード

前の話です.JavaScriptプログラミングにおいて、thisキーワードはいつも私達に疑問を感じさせます.個人的にはthisと他の言語とは大きく違っています.JavaScriptのthisはいつも一つのオブジェクトを指しています.具体的にはどのオブジェクトを指していますか?
1.オブジェクトとしてのメソッド呼び出し
オブジェクトとして関数を呼び出す方法は、オブジェクトを指すthisです.
var obj = {
    name:"   ",
    getName:function(){
      alert(this === obj);  //     true
      alert(this.a); //   : 1
    }
  }
2.一般関数として呼び出す
関数 , オブジェクトの属性が呼び出されたとき、つまり私たちがよく話している は、ブラウザのJavaScriptにおいて、グローバルオブジェクトは私たちが言っているwindowオブジェクトです.
        window.name="     ";
        //name = "     "; //   window   
        var getName = function () {
            return this.name;
        }

        console.log(getName());

または:
        window.name="     ";

        var myObject = {
            name : "     ",
            getName:function () {
                return this.name;
            }
        };

        //         
        console.log(myObject.getName());
        //        
        //1.         
        var newGetName = myObject.getName;
        console.log(newGetName());
開発において、私たちは常にダイナミック要素のバインディング方式を使用しています.例えば、あるdivノードのイベント関数の内部に、局部的なcalback方法があります.calback方法はまた普通の関数として呼び出されると、calback内部のthisはwindowになります.
        //    ,   window      id
        window.id="   window  ";

        //       
        document.getElementById("div1").onclick=function () {
            alert(this.id);//   div1
            //        
            var callback = function () {
                alert(this.id);
            }
            //          
            callback();
        }
簡単な解決法:最も容易に把握されるべきスキームでもあり、変数によってdivノードの を保存することができる.
        //    ,   window      id
        window.id="   window  ";

        //       
        document.getElementById("div1").onclick=function () {

            alert(this.id);//   div1

            var _self = this;//    
            //        
            var callback = function () {
                alert(_self.id);
            }
            //          
            callback();
        }

3.コンストラクタ関数の呼び出し
JavaScriptにはクラスがありません.クラスがありません.でも :this (window)から の演算子を提供してくれます.私たちが見ているコンストラクタはもう一つの種類に似ています.いくつかの内蔵関数を除いて、ほとんどのJavaScript関数はコンストラクタとして重点的に使用できます.new演算子を使用して関数を呼び出すと、 .
        var Person  = function () {
            this.name="   ";
        }

        var p1 = new Person();//new         ,        
        alert(p1.name);//  :   
しかし、newがコンストラクタを呼び出す時に、もう一つの問題に注意しなければならない.コンストラクタが一つのオブジェクトに戻ると、その結果は前のthis(現在のオブジェクト)に戻らず、このObjectオブジェクトに戻ると、その結果も変化します.
      var Person  = function () {
            this.name="   ";

            return {//        
                name:"   "
            }
        }

        var p1 = new Person();//new         
        alert(p1.name); //  :   
コンストラクタが表示されていないデータを返したり、非オブジェクトタイプのデータを返したりすると、上記のようなことにはなりません.
        var Person  = function () {
            this.name="   ";

           return "  ";//  string  
        }

        var p1 = new Person();//new         
        alert(p1.name); //  :   
4.Function.prototype.callまたはFuntions.prototype.appy呼び出し
一般的な関数呼び出しと比較して、Funtions.prototype.callまたはFunction.prototype.appyを使ってnew
       var obj1 = {
           name:"   ",
           getName:function () {
               return this.name;
           }
       }

       var obj2 = {
           name:"   "
       }

       console.log(obj1.getName());//                   
       console.log(obj1.getName.apply(obj2));//this   obj2