[Effective JavaScript 笔记]第23条:永远不要修改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()方法返回一个数组,该数组中包含从原始数组中删除的项。注意:会影响原数组。
翻译的文章,版权归原作者所有,只用于交流与学习的目的。
原创文章,版权归作者所有,非商业转载请注明出处,并保留原文的完整链接。