js裝飾器

在一個對象中綁定函數，稱為這個對象的方法。

在JavaScript中，對象的定義是這樣的：

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

但是，如果我們給​

​xiaoming​

​綁定一個函數，就可以做更多的事情。比如，寫個​

​age()​

​方法，傳回​

​xiaoming​

​的年齡：

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

xiaoming.age; // function xiaoming.age()
xiaoming.age(); // 今年調用是25,明年調用就變成26了      

綁定到對象上的函數稱為方法，和普通函數也沒啥差別，但是它在内部使用了一個​

​this​

​關鍵字，這個東東是什麼？

在一個方法内部，​

​this​

​是一個特殊變量，它始終指向目前對象，也就是​

​xiaoming​

​這個變量。是以，​

​this.birth​

​可以拿到​

​xiaoming​

​的​

​birth​

​屬性。

讓我們拆開寫：

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

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

xiaoming.age(); // 25, 正常結果
getAge(); // NaN      

單獨調用函數​

​getAge()​

​怎麼傳回了​

​NaN​

​？請注意，我們已經進入到了JavaScript的一個大坑裡。

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()​

​，我們還可以動态改變函數的行為。

'use strict';

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

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