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 就向一個普通的函數一樣被調用，此時指向全局對象。

來自： https://segmentfault.com/a/1190000004938787