美文网首页
【jq源码探秘】— js如何实现实现重载

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

作者: 张举欣 | 来源:发表于2018-12-18 14:36 被阅读42次
大家都知道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,直到匹配为止。

相关文章

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

    大家都知道js是没有重载的,但是通过某种方式是可以实现的,下面就是jq的实现方式: 凭直觉,函数重载可以通过if…...

  • JS-jQuery

    JQ是JS写的插件库,说白了,就是一个js文件,凡是用jq能实现的,js都能实现,js能实现的,jq却不一定能实现...

  • 常见tab效果的实现

    原生JS实现 tab栏切换地址JQ实现左侧菜单栏地址JQ实现滑动切换地址

  • JS如何实现“函数重载”

    函数的重载 在强类型语言中,可以为一个函数编写两个定义,只要这两个定义的签名(接受的参数的类型和数量)不同即可,即...

  • Node.js源码解析-Writable实现

    Node.js源码解析-Writable实现 欢迎来我的博客阅读:《Node.js源码解析-Writable实现》...

  • Node.js源码解析-Readable实现

    Node.js源码解析-Readable实现 欢迎来我的博客阅读:《Node.js源码解析-Readable实现》...

  • js Promise实现笔记

    V8引擎的实现源码:promise.js非官方实现,来自:Promise实现原理(附源码)注:啃官方源码和其他原型...

  • 如何实现JS中的重载

    1.JS由于不属于纯面向对象的语言,没有真正的重载,但是可以通过另外一些方法实现 重载,是指允许存在多个同名函数,...

  • Node.js源码解析-pipe实现

    Node.js源码解析-pipe实现 欢迎来我的博客阅读:《Node.js源码解析-pipe实现》 从前面两篇文章...

  • JS实现函数重载

    重载 做过后端的,可能有函数重载的概念 但是在JavaScript中不存在重载,如果方法名一样的话,后面的会把前面...

网友评论

      本文标题:【jq源码探秘】— js如何实现实现重载

      本文链接:https://www.haomeiwen.com/subject/ttqlkqtx.html