美丽的闭包,在js中实现函数重载

引言

最近在js的学习中,看到了函数重载的问题，一开始，只看到了实现代码，看着代码左思右想了半个小时，总算是理清了其实现的原理，也为其实现的巧妙感到赞叹，也是在本身搞懂原理以后，去网络上搜索了下，才知道，这个实现方法是jQuery做者John Resig在《JavaScript忍者秘籍》中对函数重载的实现，设计十分的巧妙，写下此文,给你们作一个分享

什么是函数的重载

重载，简单说，就是函数或者方法有相同的名称，可是参数列表不相同的情形，这样的同名不一样参数的函数或者方法之间，互相称之为重载函数或者方法。

先来看看效果

function addMethod (obj, name, fn) {
        var old = obj[name];
        obj[name] = function () {
            if (fn.length === arguments.length) {
                return fn.apply(this, arguments)
            } else if (typeof old === 'function') {
                return old.apply(this, arguments)
            }
        }
    }

    var person = {userName: 'bear鲍的小小熊'}

    addMethod(person, 'show', function () {
        console.log(this.userName + '---->' + 'show1')
    })
    addMethod(person, 'show', function (str) {
        console.log(this.userName + '---->' + str)
    })
    addMethod(person, 'show', function (a, b) {
        console.log(this.userName + '---->' + (a + b))
    })
    person.show()  
    person.show('bkl')
    person.show(10, 20)

输出的结果

//bear鲍的小小熊---->show1
    //bear鲍的小小熊---->bkl
    //bear鲍的小小熊---->30

咱们给一个对象添加了一个show方法,这个show方法,每次传入的参数不同,它进行的处理也是不同的

为了后文更好理解,这里先对fn.length这个你们可能陌生的属性作个解释,先看下面的代码

function fn(a,b,c) {}
fn.length // 3
function fn(a,b,c,d) {}
fn.length // 4

fn.legnth,是函数fn在定义时,形参的个数.好了,让咱们继续往下讲吧

这个addMethod函数,简单的来讲,就是给一个对象添加一个指定name的方法fn(后文中为了方便你们理解,咱们就以这个例子中的show来指代这个name吧),他利用了闭包,经过变量old,将每次传进来的fn给保存起来,咱们每次调用这个show方法,根据传入的参数的不一样,咱们的代码可能屡次经过old来找到以前传入的fn函数

下面咱们来对这个方法进行解析为了看的更加直观,咱们对以前的addMethod的函数作一点小小的改造,其实就是加入了一个console.log(),能够方便咱们理解,函数的执行过程

function addMethod (obj, name, fn) {
        var old = obj[name];
        obj[name] = function () {
            console.log(1) //打印1
            if(fn.length === arguments.length){
                console.log(2) // 打印2
                return fn.apply(this,arguments);
            }else if(typeof old === 'function'){
                console.log(3) // 打印3
                return old.apply(this,arguments);
            }
        }
    }
    addMethod(person, 'show', function () {
        console.log(this.userName + '---->' + 'show1')
    })
    addMethod(person, 'show', function (str) {
        console.log(this.userName + '---->' + str)
    })
    addMethod(person, 'show', function (a, b) {
        console.log(this.userName + '---->' + (a + b))
    })

下面,咱们看一下person.show方法,在不传参,传了一个参数,与传了两个参数时,函数执行的具体过程,

• person.show(10, 20)

1
2
bear鲍的小小熊---->30

可见,传入两个参数的时候,只打印了一个1,一个2,就将对应的执行函数执行了.其实这个时候person.show函数的做用域内 fn为下面这个函数

function (a, b) {
        console.log(this.userName + '---->' + (a + b))
    }

• person.show('bkl')

1
3
1
2
bear鲍的小小熊---->bkl

传入一个参数的时候执行结果为 1 --> 3 --> 1 --> 2 --> 处理后的结果 在这个过程当中因为执行person.show方法时,fn.length === 2,而咱们传入的参数为1个,那么函数会执行到

return old.apply(this,arguments);

这个时候的old是什么呢?这个时候的old实际上是在下面这个函数执行以前的person.show方法

addMethod(person, 'show', function (a, b) {
        console.log(this.userName + '---->' + (a + b))
    })

执行以后person.show函数做用域内的fn函数也就是下面这个方法

function (str) {
        console.log(this.userName + '---->' + str)
    }

• person.show()

1
3
1
3
1
2
bear鲍的小小熊---->show1

上面的也是同理,根据这个输出结果,不难看出,当没有传递参数时,经过闭包的old变量,咱们能够一路向上找到这个方法.

function () {
        console.log(this.userName + '---->' + 'show1')
    }

结语

就这样,咱们经过闭包中的old变量,将对不传参数,传了一个参数和传了两个参数进行区别处理的方法给串联了起来.实现了js的重载.再次感叹一下,这个方法真的很巧妙.真是漂亮又充满魅力的代码

若是以为还能够，请点赞鼓励一下，谢谢！