理解 javascript 中的 this 在普通函式中呼叫,指向全域性物件
阿新 • • 發佈:2019-01-31
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();