当class遇上console.log的坑，该怎么办？

最新推荐文章于 2022-09-07 22:28:31 发布

原创最新推荐文章于 2022-09-07 22:28:31 发布 · 592 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

技术类专栏收录该内容

37 篇文章

订阅专栏

本文深入探讨了JavaScript链式调用的实现原理，通过具体示例讲解如何在自定义类中实现方法的链式调用，并对比了class与function定义toString方法的差异。

最近为了面试，疯狂刷题，当我遇到这个题；大脑已经崩塌，我开始钻牛角尖了，怎么办??? 干了这杯苦酒，下辈子不当程序员！！！

先上题目：

 const chain=new Chain();
 chain.eat().sleep(5).eat().sleep(6).eat().work()
 输出结果是：
 console.log(eat->sleep(5)->eat->sleep(6)->eat-work);

其实吧，题目很简单，只要class的方法返回自身就行；先上我的代码

class Chain {
  str = "";
  constructor(str: string) {
    this.str = str ?? "";
  }
  eat() {
    if (arguments.length) {
      const str = this.str ? `->eat(${[...arguments]})` : "eat";
      return new Chain(this.str + str);
    } else {
      const str = this.str ? `->eat` : "eat";
      return new Chain(this.str + str);
    }
  }
  sleep() {
    if (arguments.length) {
      const str = this.str ? `->sleep(${[...arguments]})` : "sleep";
      return new Chain(this.str + str);
    } else {
      const str = this.str ? `->sleep` : "sleep";
      return new Chain(this.str + str);
    }
  }
  work() {
    if (arguments.length) {
      const str = this.str ? `->work(${[...arguments]})` : "work";
      return new Chain(this.str + str);
    } else {
      const str = this.str ? `->work` : "work";
      return new Chain(this.str + str);
    }
  }
  toString() {
    return this.str;
  }
  valueOf() {
    return this.str;
  }
}
Chain.prototype.toString = function() {
  return this.str;
};
const chain = new Chain();
console.log(chain
  .eat()
  .sleep(5)
  .eat()
  .sleep(6)
  .eat()
  .work());

结果打印是这样子：
在这里插入图片描述

不知道你有没有发现，我在class内部定义了toString方法，在class.prototype上也定义了toString方法，就是为了测试最后打印能不能生成一个str的字符串；我为什么这么做呢，因为function可以定义toString方法，然后console.log打印的 f 想要的字符串；
向上个function定义toString打印字符串的代码和截图；**这里我还不太确定这是不是真正的字符串，因为前面有个 f **

function add(...args) {
  const fn = function(...nums) {
    return add.apply(null, args.concat(nums));
  };

  fn.toString = function() {
    return args.reduce((a, b) => a + b);
  };
  return fn;
}

const s = add(1)(2, 3, 5)(3);
console.log(s);

在这里插入图片描述
我是不是想多了，虽然class关键字是function的语法糖；

然后，我就去查console.log的实现，查出来的结果是console.log是每个浏览器的内部方法，虽然每个浏览器都实现了console.log方法，但是不确定其内部实现原理是不是一样的；坑啊！
之后我又去查怎样查看JavaScript中[native code]的内部实现，又是坑，查不到；

算了，洗洗睡了，明天要面试，加油吧，骚年；