javascript中幾種this指向問題

javascript中幾種this指向問題

  首先必需要說的是，this 永遠指向函數運行時所在的對象，而不是函數被建立時所在的對象。
（1）、做爲函數名調用
  函數做爲全局對象調用，this指向全局對象

function a(){
    var author = "lry";
    console.log(this.author); //undefined
    console.log(this); //Window
}
a(); //其實這是至關於 window.a()

 

（2）、做爲方法調用
  函數做爲對象中的一個屬性，成爲該對象的一個方法，this指向該對象

var o = {
    author:"lry",
    fn:function(){
        console.log(this.author);  //lry
    }
}
o.fn(); //this => o

 

（3）、使用構造函數調用
  使用new調用的函數，則其中this將會被綁定到那個新構造的對象。（首先new關鍵字會建立一個空的對象，而後會自動調用一個函數方法(apply...)，將this指向這個空對象，這樣的話函數內部的this就會被這個空的對象替代）

function Fn() {
    this.author = "lry"
}
var o = new Fn();
console.log(o.author); //lry

 

（4）、apply或call調用
  自行改變this指向，函數this指向apply或call方法調用時的第一個參數

var o = {
    author:"lry",
    fn:function(){
        console.log(this.author); //lry
    }
}
var b = o.fn;
b.call(o); //或者 b.apply(o)

 

補充：
  this的最終指向的是那個調用它的對象（大多數能夠這麼理解，但並非準確的）

var o = {
    a:10,
    b:{
        a:20,
        fn:function(){
            console.log(this.a); //20
        }
    }
}
o.b.fn();

 

這裏的this爲何不是指向o？若是按照上面的理論，最終this指向的是調用它的對象，由於 若是一個函數中包含多個對象，儘管這個函數是被最外層的對象所調用，this指向的也只是它上一級的對象。看下面例子：雖然對象b中沒有屬性a，但this仍然指向的是它的上一級對象b

var o = {
    a:10,
    b:{
        //a:20,
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();

 

特殊狀況：

var o = {
    a:10,
    b:{
        a:20,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var c = o.b.fn;
c();

 

這是的this指向的是window...爲何呢？若是你還沒緩過神來的話，那你可能沒有理解this指向的永遠是最後調用它的對象。