arguments對象並不是標準的Array類型的實例。arguments對象不能直接調用Array方法。 arguments對象的救星call方法 使得arguments可以品嘗到數組方法的美味,知道可以吃,下麵就是怎麼吃的問題了。不管怎麼吃,先吃一口試試。 感覺很棒的樣子,色香都具備了,拿筷子... ...
arguments對象並不是標準的Array類型的實例。arguments對象不能直接調用Array方法。
arguments對象的救星call方法
使得arguments可以品嘗到數組方法的美味,知道可以吃,下麵就是怎麼吃的問題了。不管怎麼吃,先吃一口試試。
function callMethod(obj,method){ var shift=[].shift; shift.call(arguments); shift.call(arguments); return obj[method].apply(obj,argumetns); }
感覺很棒的樣子,色香都具備了,拿筷子嘗一下吧。
var obj={ add:function(x,y){return x+y;} }; callMethod(obj,'add',17,25);//這裡應該是42,不運行我都知道
放到chrome控制台運行一下吧,哇,好鮮艷,有紅色。
//Uncaught TypeError: Cannot read property 'apply' of undefined(…)
為什麼會出錯呢,回去找找菜譜(高3),看哪裡不對。原來arguments對象並不是函數參數的副本。所有命名參數都是arguments對象中對應索引的別名。上節好像也有,回去看一下,下麵列出一個arguments對象索引對應命名參數的列表
arguments對象: 索引 形參 實參 0 obj obj 1 method 'add' 2 17 3 25
看著這個可以想一下,這個材料(arguments對象),經過加工(兩次shift)。
arguments對象變成下麵這個樣子了
arguments對象: 索引 形參 實參 0 obj 17 1 method 25
此時我們吃到得已經是變了味的東西了,唉,這個味還能和預期一樣嘛。不出錯才怪,這個糟糕的過程在JS內部這樣執行。這時的obj['add']變成了17[25]。
17被轉化為Number對象,然後查找屬性"25",很明顯不存在,得到undefined值,然後查找undefined的'apply'屬性並將它當方法調用,最後我們的色香被味扼殺了。
這次的失敗,我們可以總結出,arguments對象和命名參數的關係是脆弱的。修改arguments對象也要小心命名參數的改變。ES5下情況更複雜。嚴格模式,函數參數不支持對其arguments對象取別名。到底如何,寫代碼看一下就知道了。代碼如下
function strict(x){ "use strict"; arguments[0]='我說還不行嘛'; return x===arguments[0]; } function nostrict(x){ arguments[0]='我說還不行嘛'; return x===arguments[0]; } strict('我就不說');//false nostrict('我就不說');//true
所以,不管說不說,我們還是不要動arguments對象了。惹不起我還躲不起嘛,我自己複製一份參數中的元素到新數組中,這樣可以吧。
var args=[].slice.call(arguments);
這是什麼,很牛的樣子。小朋友,我給你講講哈。當不使用額外的參數調用數組的slice方法時,它會複製整個數組,結果是一個真正的男人(數組)。要不我們來試試複製個數組試試。
var a=[1,2,3,4,5,6,7]; var b=a; var c=a.slice(); a.shift(); b;//[2, 3, 4, 5, 6, 7] c;//[1, 2, 3, 4, 5, 6, 7]
看到沒要真正獨立還是要複製一下的,要不會被影響的。
扯遠了,回到最初的那個問題,動手修正callMethod函數,把"味"補上。
function callMethod(obj,method){ var args=[].slice.call(arguments,2); return obj[method].apply(obj,args); }
運行一下
var obj={ add:function(x,y){return x+y;} }; callMethod(obj,'add',17,25);//42
對就是這個味(結果)。回味一下,這個過程要註意哪些。下麵是書里給的提示。
提示
-
永遠不要修改arguments對象
-
使用[].slice.call(arguments)將arguments對象複製到一個真正的數組中再進行修改
附錄一:Array隊列和操作方法
隊列方法
shift()方法
移除數組中的第一個項並返回該項,同時將數組長度減1。
var a=[1,2,3]; var b=a.shift(); b;//1 a;//[2,3]
push()方法
接收任意數量的參數,把它們逐個添加到數組末尾,並返回修改後數組的長度。
var a=[1,2,3]; var b=a.push(0); var c=a.push(4,5,7); var m=a.push([9,0]) a;//[1, 2, 3, 0, 4, 5, 7, [9,0]] b;//4 c;//7 m;//8
操作方法
concat()方法
基於當前數組中的所有項創建一個新數組。具體來說,先創建一個數組的副本,然後將接收的參數添加到這個副本的尾部,最後返回新構建的數組。
不傳參可以當複製數組來使用
var a=[2,3,4]; var b=a.concat(); a.push(2,1); a;//[2,3,4,2,1] b;//[2,3,4]
傳參是一個或多個數組,將這些數組的第一項複製到新數組後,如果不是數組則簡單添加。
var a=[1,2,3,4,6]; var b=[1,[2,3],4]; var c="good"; var d=a.concat(b,c); d;//[1, 2, 3, 4, 6, 1, [2,3], 4, "good"]
上面的代碼說明數組複製,不進行遞歸。
slice()方法
可以基於當前數組中的一或多個項創建一個新數組。(不影響原始數組)
不傳參可以用來複制數組
var a=[2,3,4]; var b=a.slice(); a.push(2,1); a;//[2,3,4,2,1] b;//[2,3,4]
傳一個或兩個參數時
var a=[2,3,4]; var b=a.slice(1); var c=a.slice(1,2); a;//[2,3,4] b;//[3,4] c;//[3]
註意:
-
參數為索引位置,範圍為[arg1,arg2),產生的新數組包括arg1位置項,不包括arg2位置的項。
-
參數可以為負數,當為負數時,對應的索引位置為數組長度加上該數來確定。
splice()方法
最強大的數組方法,主要用途是向數組中部插入項,有3種使用方式:
-
刪除:可以刪除任意數量的項,只需指定2個參數:要刪除的第一項的位置和要刪除的項數。
splice(0,2);刪除數組中的前兩項。範圍為[arg1,arg1+arg2) -
插入:可以指定位置插入任意數量的項,只需要提供3個參數:起始位置,0,和要插入的項。
splice(2,0,'good','morning');會從當前數組的位置2開始插入"godd","morning"; -
替換:可以向指定位置插入任意數量的項,且同時刪除任意數量的項,只需要指定3個參數:起始位置,要刪除的項數和要插入的任意數量的項。splice(2,1,'good','morning');刪除位置2項並添加"godd","morning"
splice()方法返回一個數組,該數組中包含從原始數組中刪除的項。註意:會影響原數組。