使用Proxy实现函数链式调用

时间:2024-03-13 21:52:30
global.add=function(num){
    return num+1
}

global.minus=function(num){
    return num-1
}

global.mult=function(num){
    return num*2
}

function Numbers(num){
    const handler = {
        get:function(obj,prop){
            console.log(obj)
            if(prop==='end'){
                return obj.num
            }
            if(typeof global[prop]==="function"){
                obj.num=global[prop](obj.num)
                return proxy
            }
        }
    }
    const proxy = new Proxy({num},handler)
    return proxy
}

console.log(Numbers(3).add.minus.mult.end)

我们在调用Numbers(3)应该返回一个Proxy对象,那么在Numbers内部需要创建一个Proxy对象并且返回这个Proxy对象。

当我们链式调用add方法时会触发Proxy对象拦截器handler里的get方法,get方法里面回去触发全局对象global身上的对应方法,传入obj里的num属性对num进行处理,然后返回proxy对象,以此类推形成链式调用,最后当调用end方法时代表链式调用结束,返回num的值。

num的变化过程如下: