1. 程式人生 > >理解 javascript 中的 this 在普通函式中呼叫,指向全域性物件

理解 javascript 中的 this 在普通函式中呼叫,指向全域性物件

javascript中的this常見的三種情況:

1.在物件的方法中呼叫,this指向該物件

var obj = {
    a: 1,
    getA: function(){
        console.log( this === obj );
    }
}

obj.getA();     //true

2.在構造器中呼叫,this指向返回的物件

var Person = function(name){
    this.name = name;
};

var person1 = new Person('yiyi');
console.log(person1.name);     //'yiyi'

3.在普通函式中呼叫,this指向全域性物件
當函式不作為物件的屬性被呼叫時,也就是我們常說的普通函式方式,此時的this總是指
向全域性物件。

var obj = {
    a: 1,
    getA: function(){
        console.log ( this === obj );   // true
        var innerGet = function(){
            console.log ( this );
        };
        innerGet();     // window{...}
        return
innerGet; } }; /* * obj.getA 是一個函式,它執行後,即 obj.getA() 返回一個 innerGet 函式 * 所以 obj.getA()() 這條語句相當於 innerGet() * 它沒有作為物件的屬性被呼叫,因此是普通函式 * 也相當於 window.innerGet() */ obj.getA()(); // window{...}

物件的方法中呼叫,this指向該物件

var obj = {
    a: 1,
    getA: (function(){
        console.log ( this === obj );   // true
var innerGet = function(){ console.log ( this ); }; innerGet(); // window{...} return innerGet; })() }; /* * obj.getA 是一個立即執行函式,它已經執行並返回了 innerGet 函式 * 因此這裡的 innerGet 函式是作為 obj 物件的方法被呼叫的 */ obj.getA(); // obj{...}

來看一個例子加深理解:
簡化版 Function.prototype.bind 的實現
bind 方法的作用是指定函式內部的 this 指向

/*
 * 程式碼來自《javascript設計模式與開發實踐》
 *
 * 為什麼這裡的 this 指向原函式?
 * 因為 bind 方法作為 function(){...} 物件的呼叫
 * 在物件的方法中呼叫,this 指向該物件
 */
Function.prototype.bind = function( context ){
    var self = this;        // 儲存原函式
    return function(){      // 返回一個新的函式
        // 執行新的函式的時候,會把之前傳入的 context
        // 當作新函式體內的 this
        return self.apply( context, arguments );
    }
};

var obj = {
    name: 'sven'
};

var func = function(){
    alert ( this.name );    // 輸出:sven
}.bind( obj );

func();