[JS] this, 你到底指向誰?

JS中, this的值取決於調用的模式, 而JS中共有4中調用模式:

1. 方法調用模式

當一個函數被保存爲對象的一個屬性時, 咱們稱它爲一個方法, 當一個方法被調用時, this指向該對象, 如:

var obj = {
 value: 1,
 getValue: function() {
  alert(this.value);
 }
};
obj.getValue(); // 輸出1, 此時的this指向obj

注意: 該模式中, this到對象的綁定發生在方法被調用的時候.

2. 函數調用模式

當一個函數並不是一個對象的屬性時, 它被看成一個函數來調用, 此時的this指向全局對象(window), 如:

window.value = 1;
function getValue() { alert(this.value); }
getValue(); // 輸出1, 此時的this指向window.

3. 構造器調用模式

結合new前綴調用的函數被稱爲構造器函數, 此時的this指向該構造器函數的實例對象, 如:

function show(val) {
 this.value = val;
};
show.prototype.getVal = function() {
 alert(this.value);
};
var func = new show(1);
func.getVal(); // 輸出1
alert(func.value) // 輸出1
// 從上面的結果, 能夠看出, 此時的this指向了func對象.

4. apply/call調用模式

apply和call方法可讓咱們設定調用者中的this指向誰, 如: 

var fun = function(str) {
 this.status = str;
}
fun.prototype.getStatus = function() {
 alert(this.status);
}
var obj = {
 status: "loading"
};
fun.prototype.getStatus.apply(obj); // 輸出"loading", 此時getStatus方法中的this指向了obj