いきさつ

prototype拡張って「prototype汚染」っていう言葉を知ってたから実際問題使うことなんて無いなんて思ってました。 が！！！！ 暇なのでvueのコード見てたら結構prototype拡張使っているところありますね・・・ 何がいいの？

そもそもprototype拡張とは？

Javascriptのすべての値はオブジェクト。。 そのオブジェクトはすべてprototypeというプロパティを持ちます。 これは継承元のものが参照されます。 もしそのオブジェクトにfooというプロパティ(ないしメソッド)がなかった場合、 prototypeの中に定義されていないか見に行きます。 そしてさらにその継承元のprototypeにないかを見に行き・・・さらにその継承元の・・・ と見に行きます。 これをプロトタイプチェーンと呼びます。

そしてそのprototypeは継承時以外にも明示的に追加することができます。

例

const member = ["山田さん", "佐藤さん"];
// 拡張する
Array.prototype.foo = "foooooooo";

class SubArray extends Array {}
const subArray = new SubArray();
// すると・・・ここでも使える
console.log(subArray.foo);

なにがいいの？

疑問

Vueの中でも使用されていますが、結局なにがいいの？ だってVueみたいなオリジナルのクラスならわざわざprototype継承しなくても Vue Classのメンバに追加すればいいじゃん。

メリット

メンバを追加したり消したりすることができる。

これによってVueならssrモードとspaモードで適切なメソッドを付与したり消したりできる。

メモリパフォーマンスの問題。

インスタンスによるメンバの設定は インスタンスすることに新しくメモリを消費してしまいます。

その点prototypeによるプロパティの追加はあくまでも参照なので メモリの消費を抑えることができます。

なるほどな〜。

おわり

たぶんこんなかんじ。 間違ってたらごめんょ。