javascript的this

風靈使發表於2018-05-29

this

javascriptthis總是指向一個物件,而具體指向哪個物件實在執行時基於函式的執行環境動態繫結的,而非函式被宣告時的環境

實際應用中,this的指向大概分為以下四種

1.作為物件的方法呼叫

2.作為普通函式呼叫

3.構造器呼叫

4.Function.prototype.call或者Function.prototype.apply呼叫

1.作為物件的方法呼叫,this指向該物件

var obj={

a:1,
getA:function(){

console.debug(this===obj);//輸出true

console.debug(this.a);//1

}

};

obj.getA();

2.作為普通函式呼叫當函式,這個全域性物件是window物件

window.name='globalName';

var getName=function(){

  return this.name;

}

console.debug(getName());

或者

window.name='gloabalName';

var myObject={

    name:'seven',

    getName:function(){

    return this.name;

    }

};

var getName=myObject.getName;

console.debug(getName());

區域性callback方法,用一個變數儲存div節點的引用;

window.id='window';

document.getElementById('div1').onclick=function(){

console.debug(this.id);//輸出div1

var callback=function(){

    console.debug(this.id);//輸出window

}

callback();

};

解決方案為:用一個變數儲存div節點的引用

window.id='window';

document.getElementById('div1').onclick=function(){

console.debug(this.id);//輸出div1

var that=this;

var callback=function(){

    console.debug(that.id);//輸出div1

}

callback();

};

3.建構函式跟普通函式一模一樣,它們的區別在於被呼叫的方式

當用new運算子呼叫函式的時候,該函式總會返回一個物件,通常情況下構造器裡面的this就指返回的這個物件

如程式碼

var MyClass=function(){

         this.name='seven';

         }

         var obj=new MyClass();

         console.debug(obj.name);//輸出seven

但是,使用new呼叫建構函式時,還要注意一個問題,如果構造器顯式的返回了一個object型別的物件,那麼此次運算結果最終會返回這個物件


      var MyClass=function(){

         this.name='seven';

         return{

              name:'anne'

         }

         };

         var obj=new MyClass();

         console.debug(obj.name);//輸出anne

如果構造器不顯式地返回任何資料,或者是返回一個非物件型別的資料,就不會造成上述問題

      var MyClass=function(){

         this.name='seven';

         return 'anne'

         };
         var obj=new MyClass();

         console.debug(obj.name);//輸出sve

4.Function.prototype.callFunction.prototype.apply可以動態地改變傳入函式的this:

      var obj1={

          name:'sven',

          getName:function(){

             return this.name;

          }
      };
      var obj2={

          name:'anne'

      };
      console.log(obj1.getName());//輸出sven;

      console.log(obj2.getName.call(obj2));//輸出anne;

相關文章