JavaScript链式调用：解锁代码新姿势

哈喽！今天跟你说说一个超好玩儿的话题，赶紧做好准备

你知道链式调用吗？真的挺好用的，比如jQuery和Promise就用这个玩转流畅运行。学好了，代码会更容易看懂，感觉怎么样？

new Promise((resolve, reject) => {
 resolve();
})
.then(() => {
 throw new Error('Something failed');
})
.then(() => {
 console.log('Do this whatever happened before');
})
.catch(() => {
 console.log('Do that');
})

链式调用是啥呀？就比如说我想用这个 math 模块发起连环请求，就是说一个操作完成后，接着还能进行下一步的操作。那我们该如何编写出支持这种链式调用的 math 模块？

const math = require('math');
const a = math.add(2, 4).minus(3).times(2);
const b = math.add(2, 4).times(3).divide(2);
const c = { a, b };
console.log(a.times(2) + b + 1); // 22
console.log(a.times(2) + b + 2); // 23
console.log(JSON.stringify(c)); // {"a":6,"b":9}

问题来了！虽然链式调用搞定了，但结果咋都出不来？咋办？

export default {
 add(...args) {
  // add
  return this;
 },
 minus(...args) {
  // minus
  return this;
 },
 times(...args) {
  // times
  return this;
 },
 divide(...args) {
  // divide
  return this;
 },
}

没事别慌，给这块板子加点料，搞点儿内部变量记录下结果。做完最后这一环节，直接用”.value”找答案就行！

咦先别太高兴了！现在我们可终于能用那个叫value的家伙来解决存储问题了，但下次内部调用时恐怕就有些小问题了。那怎么办才好？

export default {
 value: NaN,
 add(...args) {
  this.value = args.reduce((pv, cv) => pv + cv, this.value || 0);
  return this;
 },
}

又碰上链式调用的问题了！别担心，我想了个绝招儿和你们分享下。下次再碰到这种情况，咱们可以每次调用都新建个对象，这样彼此间就不会受影响，想法不错？

const a = math.add(5, 6).value; // 11
const b = math.add(5, 7).value; // 23 而非 12

下次重要事情来临时再举个例呗，随时都能用上，也不打扰别人！大家可别忘了~

好，今天就这样告一段落辣！希望诸位喜欢这些分享！别忘了叫上你的小伙伴来这个超棒的网站看看！想要聊聊天吗？那就在下方评论嗨起来呗！咱们下次再见啦哈~

const math = function() {
 if (!(this instanceof math)) return new math();
};
math.prototype.value = NaN;
math.prototype.add = function(...args) {
 this.value = args.reduce((pv, cv) => pv + cv, this.value || 0);
 return this;
};
const a = math().add(5, 6).value;
const b = math().add(5, 7).value;