zoukankan      html  css  js  c++  java
  • 浅谈JavaScript--函数重载

    个人认为重载就是一组具有相同名字、不同参数列表的函数(方法)。

    从语言角度来说,javascript不支持函数重载,不能够定义同样的函数然后通过编译器去根据不同的参数执行不同的函数。

    但是javascript却可以通过自身属性去模拟函数重载。

    • 根据arguments对象的length值进行判断
    
    function overLoading() {
      // 根据arguments.length,对不同的值进行不同的操作
      switch(arguments.length) {
        case 0:
          /*操作1的代码写在这里*/
          break;
        case 1:
          /*操作2的代码写在这里*/
          break;
        case 2:
          /*操作3的代码写在这里*/
           
          //后面还有很多的case......
        }
     
    }
    
    

    JQuery之父John Resig写的《secrets of the JavaScript ninja》中一个绝佳巧妙的方法!那种方法充分的利用了闭包的特性!

    在介绍这个方法之前,我们先来看看外国人名字组成哈,比如,John Resig,John是first-name,Resig是last-name,就相当于我们的姓名由姓和名组成一样。

    我们现在有这样的一个需求,有一个people对象,里面存着一些人名,如下:

    var people = {
      values: ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]
    };
    
    

    我们希望people对象拥有一个find方法,当不传任何参数时,就会把people.values里面的所有元素返回来;当传一个参数时,就把first-name跟这个参数匹配的元素返回来;当传两个参数时,则把first-name和last-name都匹配的才返回来。因为find方法是根据参数的个数不同而执行不同的操作的,所以,我们希望有一个addMethod方法,能够如下的为people添加find的重载:

    addMethod(people, "find", function() {}); /*不传参*/
    addMethod(people, "find", function(a) {}); /*传一个*/
    addMethod(people, "find", function(a, b) {}); /*传两个*/
    
    

    实现方法如下:

    addMethod函数,它接收3个参数,第一个为要绑定方法的对象,第二个为绑定的方法名称,第三个为需要绑定的方法(一个匿名函数)。

    function addMethod(object, name, fn) {
      var old = object[name]; //把前一次添加的方法存在一个临时变量old里面
      object[name] = function() { // 重写了object[name]的方法
        // 如果调用object[name]方法时,传入的参数个数跟预期的一致,则直接调用
        if(fn.length === arguments.length) {
          return fn.apply(this, arguments);
        // 否则,判断old是否是函数,如果是,就调用old
        } else if(typeof old === "function") {
          return old.apply(this, arguments);
        }
      }
    }
    
    

    完整例子:

    
    //addMethod
    function addMethod(object, name, fn) {
      var old = object[name];
      object[name] = function() {
        if(fn.length === arguments.length) {
          return fn.apply(this, arguments);
        } else if(typeof old === "function") {
          return old.apply(this, arguments);
        }
      }
    }
     
     
    var people = {
      values: ["Dean Edwards", "Alex Russell", "Dean Tom"]
    };
     
    /* 下面开始通过addMethod来实现对people.find方法的重载 */
     
    // 不传参数时,返回peopld.values里面的所有元素
    addMethod(people, "find", function() {
      return this.values;
    });
     
    // 传一个参数时,按first-name的匹配进行返回
    addMethod(people, "find", function(firstName) {
      var ret = [];
      for(var i = 0; i < this.values.length; i++) {
        if(this.values[i].indexOf(firstName) === 0) {
          ret.push(this.values[i]);
        }
      }
      return ret;
    });
     
    // 传两个参数时,返回first-name和last-name都匹配的元素
    addMethod(people, "find", function(firstName, lastName) {
      var ret = [];
      for(var i = 0; i < this.values.length; i++) {
        if(this.values[i] === (firstName + " " + lastName)) {
          ret.push(this.values[i]);
        }
      }
      return ret;
    });
     
    // 测试:
    console.log(people.find()); //["Dean Edwards", "Alex Russell", "Dean Tom"]
    console.log(people.find("Dean")); //["Dean Edwards", "Dean Tom"]
    console.log(people.find("Dean Edwards")); //["Dean Edwards"]
    
    
  • 相关阅读:
    請問各位大大,我要將listview顯示的縮圖加入到listview2,請問該如何做呢
    一个可设置窗口透明属性的控件,可让窗口透明、半透明
    laravel he stream or file "..laravel-2019-02-14.log" could not be opened: failed to open stream: Permission denied
    每日学习-20190721
    linux centos无法删除网站根目录下的.user.ini解决办法
    laravel在使用Composer安装插件时要求输入授权用户名密码解决办法
    Centos7 日志查看工具
    Centos7 Putty SSH密钥登录
    阿里云Centos7用putty ssh链接掉线
    阿里云 centos 无法执行moodle cron
  • 原文地址:https://www.cnblogs.com/adoctors/p/8505879.html
Copyright © 2011-2022 走看看