JavaScript學習總結——this對象

在JavaScript中，this關鍵字是動態綁定的，或稱爲運行期綁定，這極大地加強的咱們程序的靈活性，同時也給初學者帶來了不少困惑。本文總結了this的幾個使用場景和常見誤區。

全局環境

在全局環境中使用this，它會指向全局對象。在web遊覽器中，也就是window對象。

alert(this === window);    // true

函數調用

看成爲普通函數被調用時，函數內部的的this也會指向全局對象。

var name = "window";

function sayName(){
    var name = "fun";
    alert(this.name);
}

sayName();    // "window"

做爲對象的方法調用

看成爲對象內部的方法被調用時，這裏this指向這個方法所在的對象。

var name = "window";

var obj = {
  name: "obj",
  sayName: function(){
    alert(this.name);
  }
};

obj.sayName();    // "obj"

做爲構造函數調用

JavaScript 中的構造函數很特殊，若是不使用 new 調用，則和普通函數同樣。做爲又一項約定俗成的準則，構造函數以大寫字母開頭，提醒調用者使用正確的方式調用。若是調用正確，this 綁定到新建立的對象上。

function Person(name){
    this.name = name,
    this.sayName = function(){
        alert(this.name);
    }
}

var person1 = new Person("daoko");
person1.sayName();    // "darko"

apply和call調用

apply和call是函數對象的的兩個方法，它們能夠修改函數執行的上下文環境，即this綁定的對象。apply和call的第一個參數就是this綁定的對象，若apply和call的參數爲空，則默認調用全局對象。

var name = "window"

var obj = {
  name: "object"
}

function sayName(){
  alert(this.name);
}

sayName();    // 直接調用函數sayName
sayName.call(obj);    // 用call方法修改this的指向
sayName.call();    // 當call方法的參數爲空時，默認調用全局對象

特殊狀況

常見錯誤

咱們首先來看這樣一個栗子：

var name = "window";

var obj = {
  name: "obj",
  sayName: function(){
    var test = function(){
      alert(this.name);    // this綁定到全局對象上
    }
    test();
  }
}

obj.sayName();    // "window"

是否是和上面說的做爲對象的方法調用狀況很像，按照咱們的理解此時的this應該指向obj對象，可是實際狀況不是這樣的，此時的this指向全局對象。

這屬於 JavaScript 的設計缺陷，正確的設計方式是內部函數的 this 應該綁定到其外層函數對應的對象上，爲了規避這一缺陷，咱們能夠使用變量替代的方法，約定俗成，該變量通常被命名爲 that。 在這個栗子中，這樣咱們建立了一個局部變量that來指向obj對象。

var name = "window";

var obj = {
  name: "obj",
  sayName: function(){
    var that = this;    // that指向對象obj
    var test = function(){
      alert(that.name);
    }
    test();
  }
}

obj.sayName();    // "obj"

方法的賦值表達式

當咱們把一個對象的方法賦值給一個變量時，它的this會發生什麼變化呢? 看個栗子:

var name = "window";

var obj = {
  name: "obj",
  sayName: function(){
    alert(this.name);
  }
}

var test = obj.sayName;
obj.sayName();    // "obj"
test();    // "window"

從上面這個栗子中咱們能夠看到，當把對象obj的方法賦值給一個新的變量test時，它的this指向發生了變化，test就向一個普通的函數同樣被調用，此時指向全局對象。