本篇主要体验函数参数个数不确定情况下的一个解决方案。先来看一段使用函数作为参数进行计算的实例。

        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,鼠标事件

JavaScript进阶系列04,函数参数个数不确定情况下的解决方案的更多相关文章

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

    有时候,把函数作为参数可以让代码更简洁. var calculator = { calculate: function(x, y, fn) { return fn(x, y); } }; var su ...

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

    本篇主要体验JavaScript函数的声明.函数参数以及函数闭包. □ 函数的声明 ※ 声明全局函数 通常这样声明函数: function doSth() { alert("可以在任何时候调 ...

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

    本篇体验JavaScript事件的基本面,包括: ■ 事件必须在页面元素加载之后起效■ 点击事件的一个简单例子■ 为元素注册多个点击事件■ 获取事件参数 ■ 跨浏览器事件处理 □ 事件必须在页面元素加 ...

  4. JavaScript进阶系列07,鼠标事件

    鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...

  5. JavaScript进阶系列06,事件委托

    在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制.现在需要使用这个 ...

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

    本篇体验通过硬编码.工厂模式.构造函数来创建JavaScript对象. □ 通过硬编码创建JavaScript对象 当需要创建一个JavaScript对象时,我们可能这样写: var person = ...

  7. JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址

    JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址 var stateObject = {}; var title = "改变后的网址的标题"; var ...

  8. 【转】C#进阶系列——WebApi 接口参数不再困惑:传参详解

    原文地址:http://www.cnblogs.com/landeanfen/archive/2016/04/06/5337072.html 阅读目录 一.get请求 1.基础类型参数 2.实体作为参 ...

  9. 《无所不能的JavaScript编程系列:arguments 参数对象》

    前言:无所不能的JavaScript JavaScript起源于Netscape公司的LiveScript语言,这是一种基于对象和事件驱动的客户端脚本语言,最初的设计是为了检验HTML表单输入的正确性 ...

随机推荐

  1. Linux监控重要进程的实现方法

    Linux监控重要进程的实现方法 不管后台服务程序写的多么健壮,还是可能会出现core dump等程序异常退出的情况,但是一般情况下需要在无 人为干预情况下,能够自动重新启动,保证服务进程能够服务用户 ...

  2. spring-service.xml 模板

    ssm模板 <?xml version="1.0" encoding="UTF-8"?>  <beans xmlns="http:/ ...

  3. JAVA 基础基本语法---常量与变量

    JAVA 基础基本语法---常量与变量 语法:计算机能够识别的语言的规则: 0. 基本语法 编写Java程序时,应注意以下几点: 大小写敏感:Java是大小写敏感的,这就意味着标识符Hello与hel ...

  4. Node.js模块定义总结

    为了让Node.js的文件可以相互调用,Node.js提供了一个简单的模块系统.模块是Node.js 应用程序的基本组成部分,文件和模块是一一对应的.换言之,一个 Node.js 文件就是一个模块,这 ...

  5. unit测试出现异常:Exception in thread "main" java.lang.NoSuchMethodError: org.junit.platform.commons.util

    在进行单元测试时,测试出现异常 Exception in thread "main" java.lang.NoSuchMethodError: org.junit.platform ...

  6. Swagger+IdentityServer4测试授权验证

    1.Bearer授权操作,添加如下代码 services.AddSwaggerGen(options => { options.AddSecurityDefinition("Beare ...

  7. hdu 5443 (2015长春网赛G题 求区间最值)

    求区间最值,数据范围也很小,因为只会线段树,所以套了线段树模板=.= Sample Input3110011 151 2 3 4 551 21 32 43 43 531 999999 141 11 2 ...

  8. 【AtCoder】AGC029(A-E)

    A - Irreversible operation 题解 把每个B后面的W个数累加起来即可 代码 #include <bits/stdc++.h> #define fi first #d ...

  9. smali 语言语法

    Androidkiller 可以反编译Android的apk,生成一种.smali代码.(这理解好像不对) 网上找了一篇smali的语法手册,可以方便查找,文章名<Smali文件语法参考> ...

  10. JSP中的Java代码和内置对象

    一.JSP中的Java代码 (一)JSP页面中有三种方式嵌入java代码: 1.java的表达式 格式:<%= java表达式 %> 2.java的语句 格式:<% java语句&g ...