JavaScript this的指向問題

標籤：關鍵字   rip   bsp   his   user   對象   pre   bind   bin   

this的指向

在函數建立的時候，this的指向還未確定，它最終指向調用它的對象

 

window.onload=function(){
　　window.a="我的曾經"
　　function da(){
　　　　console.log(this.a)
　　}
　　da()　　//我的曾經
}

解：window對da()函數進行調用，故this指向window

 

window.onload=function(){
　　window.a="我的曾經"
　　var bn={
　　　　a:"小白",
　　　　da:function(){
　　　　　　console.log(this.a)
　　　　}
　　}
　　bn.da()　　//小白
}

解：bn對象對da()函數進行調用，故this指向window

 

window.onload=function(){　　window.a="我的曾經"　　var a="小白"　　var bn={        a:"大白",        da:{            //a:"打包",            b:function(){                console.log(this.a)             }        }　　}　　bn.da.b()　　//undefined}

解：da對象調用b()函數，故this指向da

 

window.onload=function(){　　window.a="我的曾經"　　var a="小白"　　var bn={        a:"小白",        da:{            a:"打包",            b:function(){                console.log(this.a)             }        }　　}    var hk=bn.da.b　　hk()　　//我的曾經}

解：var hk=bn.da.b這句話，將b()函數賦值hk，所以它調用的是window.hk(),故this指向window

 建構函式的this指向

function this(){    this.user = "呵呵噠";}var a = new this();console.log(a.user); //呵呵噠

解：new關鍵字就是建立一個對象執行個體，所以a是個對象，所以函數this()被對象a調用，那麼this指向的自然是對象a，對象a中會有user，是因為new關鍵字於複製了一份this()函數

 

function fu(){      this.user = "武器";      return {};  }var a = new fu;  console.log(a.user); //undefined

function fu(){　　this.name="大叔";　　return 25; }var a=new fu;console.log(a.name)　　//大叔

解：如果傳回值是一個對象，那麼this指向的就是那個返回的對象，如果傳回值不是一個對象那麼this還是指向函數的執行個體，如果return null，雖然null也是對象，但是在這裡this還是指向那個函數的執行個體

 

call()

var a = {    user:"hhh",    fn:function(a,b){        console.log(this.user); //hhh        console.log(a+b); //8    }}var b = a.fn;b.call(a,3,5);

解：call() 方法，它的第一個參數當做作 this 的對象。即this指向a，其他參數都直接傳遞給函數自身即b

 

 

apply()

var a = {    user:"hhh",    fn:function(a,b){        console.log(this.user); //hhh        console.log(a+b); //11    }}var b = a.fn;b.apply(a,[3,5]);

解：apply() 方法有兩個參數，用作 this 的對象和要傳遞給函數的參數的數組

 

bind()

var a = {    user:"hhh",    fn:function(aa,bb,cc){        console.log(this.user); //hhh        console.log(aa,bb,cc); //1 2 3    }}var b = a.fn;var c = b.bind(a,1);c(2,3);

解：bind() 方法，它其實返回一個函數，它的第一個參數當做作 this 的對象。即this指向a，其他參數按順序都傳遞給函數自身即b

 

this指向的應用

window.onload=function(){    var bn={        fn:function fn(){              function hj(){                console.log(this)            }            hj()        },        gn:function gn(){              function hj(obn){                console.log(obn)            }            hj(this)        },        bn:function bn(){            var that=this            function hj(){                console.log(that)            }            hj()        }    }    bn.fn()    //window    bn.gn()　　//gn    bn.bn()　　//bn}

正常情況，函數嵌套函數，裡面函數的this指向window，那我們需要他指向嵌套他的函數時有兩種方法；1：將this作為參數傳遞到被嵌套的函數裡，2：將this賦值給一個變數，讓被嵌套函數進行調用

 

JavaScript this的指向問題