JavaScript ではどんな処理のときに prototype を使って拡張すべきなのか

Question

拡張とフツーの関数

これまではフツーの関数でしか処理を宣言したことがありませんでしたが、Array.prototype.●● = 処理 という記述によって、Arrayオブジェクトに●●という処理を根本的に登録する、いわゆる拡張なる機能があるらしいと知りました。

でもそれじゃ一体、いつ拡張を登録すべきで、いつフツーの関数を宣言すべきなのでしょうか？

考えた例

例えば以下の例 (insertAndTrimという拡張と insertAndTrimArrayというフツーの関数) を考えてみたのですが、どちらがいつ便利なのかよく分かりません。

拡張

登録

/*----------------------------------------
    arrayExtensions.js
----------------------------------------*/

(function () {
    'use strict';

    Array.prototype.insertAndTrim = function(value, { index = 0, maxCount = null } = {}) {
        this.splice(index, 0, value);
        if (maxCount) {
            return this.slice(0, maxCount);
        }
        return this;
    };

})();

利用

/*----------------------------------------
    test.js
----------------------------------------*/

let arr = [1, 2, 3];
arr.insertAndTrim(4, { index: 1, maxCount: 4 });
console.log(arr); // [1, 4, 2, 3]

フツーの関数

宣言

/*----------------------------------------
    arrayUtils.js
----------------------------------------*/
export function insertAndTrimArray(arr, value, { index = 0, maxCount = null } = {}) {
    arr.splice(index, 0, value);
    if (maxCount) {
        arr = arr.slice(0, maxCount);
    }
    return arr;
}

利用

/*----------------------------------------
    test.js
----------------------------------------*/

import { insertAndTrimArray } from './arrayUtils.js';

let arr = [1, 2, 3];
arr = insertAndTrimArray(arr, 4, { index: 1, maxCount: 4 });
console.log(arr); // [1, 4, 2, 3]

補足

・ES2015(ES6) の利用です。
・拡張も関数の一種なのかもしれませんが区別する正しい呼称を知らないので、当質問では「フツーの関数を宣言する」と「拡張を登録する」とさせて頂きました。
・どうやら Object は拡張すべきでないらしい のですが、それ以外 (上記のような Array や Storage や String などなど) についてはいつ拡張での登録を利用すべきなのか知りたいです。

よろしくお願い致します。

Answer 1

prototypeで継承するのは、prototype汚染と呼ばれ、自分が作成したオブジェクトなど以外には、使用しない方がよいです。
一時期、「prototype汚染」が問題になったことがあり、その時からJavaScriptプログラマーだった人は、みな使ってはいけないテクニックだ、ということを学んでいます。

なので、Object であろうと Array であろうと、prototype継承というか、prototypeで拡張させる、ということは、できるけど、やってはいけないテクニックというものになります。

また、さらに言えば、継承というもの自体が「やってはいけない」というまでのことではないですが、使う必要のない不要なテクニックなので、prototypeなどはそもそも使わなくてよくて、使わない方がより腕が良いプログラマーになれると思います。

Comments

[maisumakun]

prototypeに書き込む使い方が悪影響しないような例外としては、「Ecmaの標準で後から追加されたけど、環境にはない関数を補う場合」程度です。

[munekun]

ありがとうございます。そういう問題があったというのは知っておかないとまずかったですね。共通認識を教えていただきありがとうございます。使わないように気を付けます。

Answer 2

prototypeをいじった場合、複数のプロジェクトで競合する可能性が高いので既存の要素には原則使わないに越したことはありません。ユーザーが作成したクラスにもprototype設定はできるので場合によっては対応してもよいですが、普通にコンストラクタで指定する方が効率的でしょう

class myClass{
  constructor(n=null){
    this.a=1;
    if(n)this.b=n;
  }
}
const test1=new myClass;
const test2=new myClass(100);
console.log([test1.a,test1.b,test1.c]); //この時点ではb,cは未設定
console.log([test2.a,test2.b,test2.c]); //この時点ではcは未設定
myClass.prototype.b=2;
myClass.prototype.c=3;
console.log([test1.a,test1.b,test1.c]); //prototypeを変更する前のインスタンスにも反映されb,cが設定
console.log([test2.a,test2.b,test2.c]); //prototypeを変更する前のインスタンスにも反映されcが設定
const test3=new myClass;
const test4=new myClass(100);
console.log([test3.a,test3.b,test3.c]); //test1と同値
console.log([test4.a,test4.b,test4.c]); //test2と同値

※ちょっと意図が伝わりづらかったのでコメントをつけておきます

Comments

[munekun]

ありがとうございます。突然クラスが出てきて一瞬なんのことかわからず焦りましたが、クラス、コンストラクタ、prototype、の関係などまったく理解しておりませんでしたので、良い機会になりました。

Answer 3

いろいろな考え方がありますが、いわゆるビルトインオブジェクトのプロトタイプを拡張するのは、可能なかぎり避けるべきです。

どうしても、ということであれば、Symbolを使えば多少はマシになるかもしれません。Symbol("Symbol") === Symbol("Symbol")が真にならないという特徴があるため、プロパティ名の衝突が起きないのです。
（意図的に衝突しようと思えばできないこともないですが）

Comments

[munekun]

ありがとうございます。やはりみなさん使わない派なのですね。Symbolなど初耳テクで勉強になりました。