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指向的永遠是最后調用它的對象。