js this pointer 指針

this

JavaScript的函數內部若是調用了this，那麼這個this到底指向誰？

答案是，視狀況而定！

若是以對象的方法形式調用，好比xiaoming.age()，該函數的this指向被調用的對象，也就是xiaoming，這是符合咱們預期的。

若是單獨調用函數，好比getAge()，此時，該函數的this指向全局對象，也就是window。

坑爹啊！ 更坑爹的是，若是這麼寫：

var fn = xiaoming.age; // 先拿到xiaoming的age函數
fn(); // NaN

也是不行的！要保證this指向正確，必須用obj.xxx()的形式調用！

因爲這是一個巨大的設計錯誤，要想糾正可沒那麼簡單。ECMA決定，在strict模式下讓函數的this指向undefined，所以，在strict模式下，你會獲得一個錯誤：

'use strict';

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};

var fn = xiaoming.age;
fn(); // Uncaught TypeError: Cannot read property 'birth' of undefined

這個決定只是讓錯誤及時暴露出來，並無解決this應該指向的正確位置。

有些時候，喜歡重構的你把方法重構了一下：

'use strict';

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - this.birth;
        }
        return getAgeFromBirth();
    }
};

xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined

結果又報錯了！緣由是this指針只在age方法的函數內指向xiaoming，在函數內部定義的函數，this又指向undefined了！（在非strict模式下，它從新指向全局對象window！）

修復的辦法也不是沒有，咱們用一個that變量首先捕獲this：

'use strict';

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var that = this; // 在方法內部一開始就捕獲this
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - that.birth; // 用that而不是this
        }
        return getAgeFromBirth();
    }
};

xiaoming.age(); // 25

用var that = this;，你就能夠放心地在方法內部定義其餘函數，而不是把全部語句都堆到一個方法中。

apply

雖然在一個獨立的函數調用中，根據是不是strict模式，this指向undefined或window，不過，咱們仍是能夠控制this的指向的！

要指定函數的this指向哪一個對象，能夠用函數自己的apply方法，它接收兩個參數，第一個參數就是須要綁定的this變量，第二個參數是Array，表示函數自己的參數。

用apply修復getAge()調用：

function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 25
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 參數爲空

另外一個與apply()相似的方法是call()，惟一區別是：

apply()把參數打包成Array再傳入；

call()把參數按順序傳入。

好比調用Math.max(3, 5, 4)，分別用apply()和call()實現以下：

Math.max.apply(null, [3, 5, 4]); // 5
Math.max.call(null, 3, 5, 4); // 5

對普通函數調用，咱們一般把this綁定爲null。

裝飾器

利用apply()，咱們還能夠動態改變函數的行爲。

JavaScript的全部對象都是動態的，即便內置的函數，咱們也能夠從新指向新的函數。

如今假定咱們想統計一下代碼一共調用了多少次parseInt()，能夠把全部的調用都找出來，而後手動加上count += 1，不過這樣作太傻了。最佳方案是用咱們本身的函數替換掉默認的parseInt()：

var count = 0;
var oldParseInt = parseInt; // 保存原函數

window.parseInt = function () {
    count += 1;
    return oldParseInt.apply(null, arguments); // 調用原函數
};

// 測試:
parseInt('10');
parseInt('20');
parseInt('30');
count; // 3