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进阶系列”包括：

JavaScript进阶系列01,函数的声明，函数参数，函数闭包

JavaScript进阶系列02,函数作为参数以及在数组中的应用

JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象

JavaScript进阶系列04,函数参数个数不确定情况下的解决方案

JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数

JavaScript进阶系列06,事件委托

JavaScript进阶系列07,鼠标事件