Snoop Blog

链式调用类似于add(1)(2)??如何实现add(1)(2)(3)？

 
  • 2020年 02月09日

昨晚同事聊天间说她昨天约了个电面，问到了jQuery的链式调用原理。因为我本人很少使用jquery，但是觉得这个问题挺有意思。想深入思考一下。

一开始我错以为的链式调用就是类似于 add(1)(2)(3)~

jQuery的链式调用

像jquery $('div').addClass('active').click(() => {...}) 为什么可以链式调用？

addClass 也好 click 方法也好 其实都是绑定在原型上的。其实只要执行每一步之后都return ‘this’ 也就是返回当前的实例对象，就可以再继续执行原型上绑定的方法。

Promise thenable

Promise.then().then() 关于promise的链式调用，就是使用then方法后返回一个promise对象，可以继续用then方法调用。

原来我认为的add(1)(2)(3)是链式调用理解错了，仔细想一想add(1)(2)(3)其实和函数柯里化的概念挺像的 即函数是一等公民，每次只接收一个参数，不由的思考那么add(1)(2)(3)咋实现啊

函数柯里化 valueOf toString

function add() {
  let arg = Array.prototype.slice.call(arguments)

  let ret = function () {
    let args = Array.prototype.slice.call(arguments)
    return add.apply(null, arg.concat(args))
  }

  ret.toString = function () {
    return arg.reduce((acc, cur) => acc + cur)
  }

  return ret
}

实现的思路主要是两点， 一个是了解过函数柯里化的思想 一个是Object的toString 和 valueOf的方法，再借助闭包实现即可。

直接访问一个函数不执行 打印出来的其实就是a.toString()

于number 参与计算时会隐式转换 这时候先取的就是valueOf值

搜索