JavaScript學習筆記十：方法

JavaScript教程傳送門

綁定到對象上的函數稱為方法，和普通函數也沒啥差別：

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

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

它在内部使用了一個

this

關鍵字，在一個方法内部，

this

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

xiaoming

這個變量。是以，

this.birth

可以拿到

xiaoming

的

birth

屬性。

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

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

xiaoming.age(); // 26, 正常結果
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: ,
    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

應該指向的正确位置。

在方法内部定義的函數中，

this

能夠正常使用嗎？

'use strict';

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

xiaoming.age(); // 26
           

apply

可以用函數本身的

apply

方法，來指定函數的

this

指向哪個對象，它接收兩個參數，第一個參數就是需要綁定的

this

變量，第二個參數是

Array

，表示函數本身的參數。

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

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

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

另一個與

apply()

類似的方法是

call()

，唯一差別是：

• apply()把參數打包成Array再傳入；
• call()把參數按順序傳入。

比如調用

Math.max(3, 5, 4)

，分别用

apply()

和

call()

實作如下：

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

裝飾器

JavaScript的所有對象都是動态的，即使内置的函數，我們也可以重新指向新的函數。

現在假定我們想統計一下代碼一共調用了多少次

parseInt()

，可以把所有的調用都找出來，然後手動加上

count += 1

，不過這樣做太傻了。最佳方案是用我們自己的函數替換掉預設的

parseInt()

：

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

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

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