配列としてプロトタイプ化された JavaScript オブジェクト メンバー: クラス インスタンス全体で共有

JavaScript で配列のプロトタイプを作成する場合、これらのメンバーが共有されることを理解することが重要ですすべてのクラス インスタンス間で。プライベート オブジェクト メンバーに慣れている場合、この動作は直観に反しているように見えるかもしれません。

動作の説明

JavaScript のプロトタイプ メカニズムにより、オブジェクトは親オブジェクトからプロパティとメソッドを継承できます。プロトタイプとして知られています。プロトタイプのプロパティとして配列を定義すると、そのプロトタイプから継承するすべてのオブジェクトからアクセスできるようになります。

サンプル スクリプトは、この動作を示しています。

function Sandwich() {
    // Uncomment this to fix the problem
    //this.ingredients = [];
}

コメント行のコメントを解除すると、各 Sandwich インスタンスは独自のプライベート食材配列を持つことになります。ただし、この行がコメントアウトされているため、すべてのインスタンスは同じプロトタイプ配列を共有します。

これは、チーズバーガーに材料を追加すると、blt と Spice_chicken_sandwich の材料も更新されることを意味します。これを防ぐには、以下の更新された例に示すように、コンストラクター内で成分配列を定義する必要があります。

function Sandwich() {
    this.ingredients = [];
}

プロトタイプとインスタンス

プロトタイプのプロパティとインスタンスのプロパティを区別することが重要です。プロトタイプ プロパティは、そのプロトタイプを継承するすべてのオブジェクトで共有されますが、インスタンス プロパティは各オブジェクトに固有です。

• プロトタイプにプロパティを割り当てて、共有データまたはメソッドを定義します。
• 割り当てコンストラクター内のインスタンスにプロパティを追加して、インスタンス固有のデータを定義します。

問題を修正するためのコード変更Behavior

スクリプト例では、 this.ingredients = []; という行のコメントを解除しています。 Sandwich コンストラクター内では、意図したとおり、各インスタンスが独自の成分配列を持つことが保証されます。

結論

予期せぬ共有を回避するには、JavaScript でプロトタイプ化された配列の動作を理解することが重要です。クラスインスタンス間で。インスタンス固有である必要があるデータはコンストラクター内で定義する必要がある一方、共有データは継承を通じてプロトタイプに割り当てることができることを常に覚えておいてください。