JavaScript中的this

在JavaScript中this關鍵字的用法很靈活也很強大，但也每每給概念不清的初學者帶來混淆，若是在一個function中你不知道this表明什麼，那麼你也很難理解這個function的做用了。

在JavaScript中this表明了當前執行的上下文，它是動態綁定的，也就是說只有到了function調用時才肯定this所綁定的對象。因此咱們只要清楚的瞭解到一個function是如何被調用的，咱們也就能清楚的知道this綁定的是什麼對象。在JavaScript中function一共有4種調用模式:

1.方法調用模式

當一個函數被保存爲對象的一個屬性時，這個函數就被成爲方法。因此當一個方法被調用時，this就綁定到該對象:

var myObject = {
    value: 0,
    increment: function () {
        this.value += 1;
    }
};

myObject.increment();
alert(myObject.value);  //1
myObject.increment();
alert(myObject.value);  //2

從上面的例子咱們能夠看到在myObject.increment()方法中，this綁定到myObject對象，並經過this去訪問該對象的value屬性。

2.函數調用模式

當一個函數並不是一個對象的屬性時（除了全局對象），那麼它就被看成一個函數來調用，當函數以此模式來調用時，this將被綁定到全局對象。這很容易理解，可是須要注意的是，一個內部函數被調用時，this仍然是被綁定到全局對象，好比:

myObject.someMethod = function () {
    this.value = 2;
    return function () {
        alert(this.value);  //undefined
    };
};

var method = myObject.someMethod();
method();     //undefined

咱們能夠看到，someMethod中在內部返回了一個匿名函數，在這個函數中this綁定的不是外部函數someMethod的this變量（即myObject），而是全局對象，由於咱們沒有定義全局變量value，因此顯示的結果爲undefined。若是咱們須要將內部函數的this也綁定到myObject對象，咱們能夠這樣作:

myObject.someMethod = function () {
    this.value = 2;
    var that = this;
    return function () {
        alert(that.value);  //2
    };
};

var method = myObject.someMethod();
method();     //2

3.構造器調用模式

所謂的構造器模式就是使用new關鍵字來調用一個函數，這樣將建立一個隱藏連接到該函數的prototype成員的新對象，而且this關鍵字將會綁定到那個新對象上。

function Person()
{
    this.age = 20;
}

var person = new Person();
alert(person.age);  //20

固然，咱們應當要注意:若是在調用Person()時，沒有使用new關鍵字，this將會綁定到全局對象上，這樣極可能會形成全局變量污染！！

4.Apply調用模式

由於JavaScript是一門函數式的語言（糅合了c語法），因此函數也是對象，能夠擁有方法。

函數的apply方法讓咱們構建一個參數數組並用其去調用函數，它也容許咱們選擇this所綁定的值。apply方法接受兩個參數，第一個參數是指定this所綁定的值，第二個就是參數數組:

function add(a, b) {
    return a + b;
}

var array = [3, 4];
var result = add.apply(null, array);  //這裏將add中的this指定爲null
alert(result);

另外,函數對象還有call方法與apply方法相似，只是將參數數組改成參數列表。

 

總結：咱們只要搞清楚一個函數他是如何被調用的，就能清楚的知道this所綁定的值，這樣就不容易混淆了