JavaScript进阶系列04,函数参数个数不确定情况下的解决方案
本篇主要体验函数参数个数不确定情况下的一个解决方案。先来看一段使用函数作为参数进行计算的实例。
var calculate = function(x, y, fn) {return fn(x, y);
};var sum = function(x, y) {return x + y;
};var diff = function(x, y) {return x - y;
};var sumResult = calculate(1, 2, sum),diffResult = calculate(1, 2, diff);
但是,以上有一个问题:弹性不够好,如果caculate需要多个形参,我们可能这样写:
var calculate = function(x, y, z, a, b, c, fn){}
这样,每次需求改变,都要更改这里的参数,显得非常不方便。
我们知道,不管函数有多少个参数,所有的参数都会被保存到arguments到这个数组类型中。试想一下,如果我们可以从argments数组中拿到最后一个元素,即代表函数的fn,再把其它数组元素作为fn的参数,执行fn(arguments),这样,不管方法的参数列表有多长,都可以把所有参数放到argments中再传递给函数。
还记得Array有一个原型方法pop,能把数组的最后一个元素弹出,如果能把这个方法应用到arguments上,不就可以拿到arguments的最后一个元素、fn函数了吗?而实际上,JavaScript是允许把一个对象的方法应用到另外的对象上的!
先来熟悉一下如何使用吧。
□ 把一个对象的方法应用到另外一个对象
※ 不传递参数
var obj = {name: "myname",
doSth: function() {alert(this.name);
}};var foo = {name: "my name is foo"
};var bar = {name: "my name is bar"
};obj.doSth();
输出结果:myname
如果我们想把obj对象的doSth方法应用到foo对象,可以使用apply方法,把最后一行改为:
obj.doSth.apply(foo);
输出结果:my name is foo
※ 传递参数
如果obj对象的doSth方法带参数,使用apply方法是否能把doSth方法的参数传递给foo或bar对象呢?
var obj = {name: "myname",
doSth: function(x, y) {alert(this.name + " " + x + " " + y);}};var foo = {name: "my name is foo"
};var bar = {name: "my name is bar"
};obj.doSth.apply(bar, ["hello", "world"]);
输出结果:my name is bar hello world
可见,可以把doSth的参数以数组的形式作为apply方法的实参,传递给bar对象。
※ 使用call方法
call方法也可以实现把一个对象的方法应用到另外一个对象。但用法和apply有所区别。
把最后一行代码改为:
obj.doSth.call(foo, "hello", "world");
输出结果:my name is foo hello world
可见,doSth的参数挨个作为call方法的实参,传递给foo对象。
□ 代码改进
var calculate = function() {var fn = Array.prototype.pop.apply(arguments);return fn.apply(null, arguments);};var sum = function(x, y) {return x + y;
};var diff = function(x, y) {return x - y;
};var sumResult = calculate(1, 2, sum),diffResult = calculate(1, 2, diff);alert(sumResult);
在calculate方法中,首先把Array的原型方法pop应用到了argments上,这样就拿到了参数列表中的最后一个函数,然后再把arguments数组传递给fn.apply方法。注意:不能以fn(arguments)调用,因为arguments是数组而不是参数列表。
再来修改sum方法和diff方法,让它们可以处理多个参数。
var calculate = function() {var fn = Array.prototype.pop.apply(arguments);return fn.apply(null, arguments);};var sum = function() {var total = 0;for (var i = 0, l = arguments.length; i < l; i = i + 1) {
total = total + arguments[i];}return total;
};var diff = function () {//把Array获取数组第一个元素的shift方法应用到argments上
var total = Array.prototype.shift.apply(arguments);for (var i = 0, l = arguments.length; i < l; i = i + 1) {
total = total - arguments[i];}return total;
};var sumResult = calculate(1, 2, 3, 4, 5, sum),diffResult = calculate(5, 1, 2, diff);alert(sumResult);alert(diffResult);
输出结果:
15
2
总结:
○ 当一个函数需要处理多个参数,并且最后一个参数是函数,类似someFucntion(参数1, 参数2......参数n, fn),我们可以先取出函数fn,再把参数1, 参数2......参数n以数组形式传递给fn.apply(null,arguments)
○ 在JavaScript中,可以把一个对象的方法应用到另外的对象上
“JavaScript进阶系列”包括: