😺

JavaScript: ネイティブなビルドインを魔改造しようとした話

に公開
JavaScript
tech

結論

これ読みまっしょい

本題: Arrayを拡張したContentsクラス作ったが、

そのContentsクラスからnewしたcontentsが引数に渡ってきている

const Messages = ({ room, contents, scrollingRef }) => {
  const [messages, setMessages] = useState([]);
  useEffect(() => {
    // INFO: 購読
    contents.onSnapshot((data) => {
      setMessages(data);
    });
  }, []);

  // INFO: "extends Array" したから。extends Arrayしてmapつかいたかったのに本末転倒
  // let messages = [];
  // for (let i = 0; i < contents.length; i++) {
  //   messages.push(contents[i]);
  // }
  return (
    <>
      {messages.map((content, i) => <Message content={content} scrollingRef={scrollingRef} index={i} key={content.id} />)}
    </>
  );
};
  • ContentsクラスはArrayを拡張している
  • Contentsクラスは1つ以上のメンバ変数を持っている
  • contents.lengthは正しい値を返した
  • contents.mapなどを使うものなら、エラーがでるぜ！！！！！

解決


  // 組み込みのメソッドは、これをコンストラクタとして使います
  static get [Symbol.species]() {
    return Array;
  }

継承側でも継承元でもどちらでもいいので、
これをいれると.mapを使おうが
インスタンス生成時は常にコンストラクタに正常値が送られて安心。

余談

Jsのクロージャって読むほどにおもしろい！
https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures

Discussion