JS進階之---this的指向

 

this到底指向什麼地方，決定於函數的調用方式。

一、 指向全局變量 --- 函數被單獨調用的時候

function fn() {
    console.log( this.a );
}
var a = 2;
fn(); //2       fn單獨調用，this引用window

 

二、 指向某對象 --- 隱式綁定
　　隱式調用的意思是，函數調用時擁有一個上下文對象

function fn() {
    console.log( this.a );
}
var obj = {
    a: 2,
    fn: fn
};
obj.fn(); //2        this引用obj。

//說明的一點是，最後一個調用該函數的對象是傳到函數的上下文對象。如：
function fn() {
    console.log( this.a );
}
var obj2 = {
    a: 42,
    fn: fn
};
var obj1 = {
    a: 2,
    obj2: obj2
};
obj1.obj2.fn(); //42      this引用的是obj2.

//還有一點要說明的是，失去隱式綁定的狀況，以下：
function fn() {
    console.log( this.a );
}
var obj = {
    a: 2,
    fn: fn
};
var bar = obj.fn; // 函數引用傳遞
var a = "全局"; // 定義全局變量
bar(); // "全局"

　　如上，雖然有隱式綁定，可是它執行的效果明顯是把fn賦給bar。這樣bar執行的時候，依然是函數單獨調用，指向全局變量，因此輸出結果如上。

 

三、 指向某對象 --- 顯示綁定
　　經過call()、apply()、bind()。它們接收的第一個參數便是上下文對象,並將其賦給this。

function fn() {
    console.log( this.a );
}
var obj = {
    a: 2
};
fn.call( obj ); // 2

　　若是咱們傳遞第一個值爲簡單值，那麼後臺會自動轉換爲對應的封裝對象。若是傳遞爲null，那麼結果就是在綁定默認全局變量。

 

四、 指向類實例
　　若是是一個構造函數，用new來調用，那麼this指向新建立的對象。

function fn(a) {
    this.a = a;
}
var bar = new fn( 2 );
console.log( bar.a );// 2