JavaScript中有一個call和apply方法
更改對象的內部指針,即改變對象的this指向的內容。
這在面向對象的js編程過程當中有時是頗有用的。對於apply和call二者在做用上是相同的,但二者在參數上有區別的。
對於第一個參數意義都同樣,但對第二個參數:
apply傳入的是一個參數數組,也就是將多個參數組合成爲一個數組傳入,而call則做爲call的參數傳入(從第二個參數開始)。
如 func.call(func1,var1,var2,var3),
對應的apply寫法爲:func.apply(func1,[var1,var2,var3])
同時使用apply的好處是能夠直接將當前函數的arguments對象做爲apply的第二個參數傳入。
在一個對象中綁定函數,稱爲這個對象的方法。javascript
在JavaScript中,對象的定義是這樣的:java
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
屬性。app
讓咱們拆開寫:函數
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
到底指向誰?this
答案是,視狀況而定!spa
若是以對象的方法形式調用,好比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;
,你就能夠放心地在方法內部定義其餘函數,而不是把全部語句都堆到一個方法中。
雖然在一個獨立的函數調用中,根據是不是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