JavaScript中this的使用方法總結

JavaScript中this的使用方法總結

在JavaScript中，this的使用分為四種場景，具體請參考阮一峰老師關於this的講解

第一種情況是純函數使用

var x =1 ;
function test(){
  console.log(this.x)
}
test() //1

這里的輸出是1，因為在函數中屬於全局性的調用，因此this指代window，代表全局對象

第二種情況是作為對象方法調用

function test(){
  console.log(this.x)
}
var obj={}//申明一個對象
obj.x = 1;//給對象設置一個屬性x並賦值為1
obj.m=test;//給對象設置一個方法test
obj.m();//執行對象方法，輸出的是1

以上代碼相當於

var obj = {
    x : 1,
    m : function () {
        console.log(this.x)//this指代的是obj這個對象
    }
  }
  obj.m()

從上面代碼可以看出，當this作為對象方法調用的時候，this指代的這個上級對象

第三種情況是作為構造函數使用

function test(){ //創建一個構造函數
  this.x=1 //構造函數的屬性x的值為1
}
var obj = new test();//實例化構造函數生成一個新的對象，這個對象擁有一個屬性x，且值為1
console.log(obj.x) //1

在上面的代碼示例中，this指代的就是obj這個新的對象

第四種情況是apply調用

apply()是函數的一個方法，作用是改變函數的調用對象。它的第一個參數就表示改變后的調用這個函數的對象，將代替function類里面的this對象。因此，這時this指的就是這第一個參數

var x = 0;
function test() {
　console.log(this.x);
}

var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply() // 0

apply()的參數為空時，默認調用全局對象。因此，這時的運行結果為0，證明this指的是全局對象。

如果把最后一行代碼修改為

obj.m.apply(obj); //1

運行結果就變成了1，證明了這時this代表的是對象obj。