【jq源码探秘】— js如何实现实现重载

举报
无问东西 发表于 2019/01/02 16:09:36 2019/01/02
【摘要】 大家都知道js是没有重载的,但是通过某种方式是可以实现的,下面就是jq的实现方式: /*给某个对象添加方法的函数*/ function addMethod(object, name, fn) { var old = object[name]; //第一次old是 undefined object[name] = function() { ...
大家都知道js是没有重载的,但是通过某种方式是可以实现的,下面就是jq的实现方式:
    /*给某个对象添加方法的函数*/
    function addMethod(object, name, fn) {        var old = object[name];        //第一次old是 undefined
        object[name] = function() {            //如果调用函数的参数长度等于fn的参数长度,那就返回当前函数
            if (fn.length == arguments.length) {                return fn.apply(this, arguments);
            } else if (typeof old == 'function') {            //如果当前的调用不匹配那么调用上一次的old,直到匹配为止
                return old.apply(this, arguments); 
            }
        }
    }    var people = ['1', '2', '3'];
    addMethod(people, 'finds', function() {        return 0;
    })
    addMethod(people, 'finds', function(firstname) {        return 1;
    })
    addMethod(people, 'finds', function(firstname, lastname) {        return 2;
    })    console.log(people.finds('1', '2'))    console.log(people.finds());    console.log(people.finds('1'));
凭直觉,函数重载可以通过if…else或者switch实现,这就不去管它了。jQuery之父John Resig提出了一个非常巧(bian)妙(tai)的方法,利用了闭包。

people.find事实上只能绑定一个函数,那它为何可以处理3种不同的输入呢?它不可能同时绑定3个函数find0,find1与find2啊!这里的关键在于old属性。
由addMethod函数的调用顺序可知,users.find最终绑定的是find2函数。然而,在绑定find2时,old为find1;同理,绑定find1时,old为find0。3个函数find0,find1与find2就这样通过闭包链接起来了。
根据addMethod的逻辑,当fn.length与arguments.length不匹配时,就会去调用old,直到匹配为止。


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。