ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript のプロトタイプ配列がクラス インスタンス間で共有されるのはなぜですか?

JavaScript のプロトタイプ配列がクラス インスタンス間で共有されるのはなぜですか?

Linda Hamilton
リリース: 2024-11-19 09:13:02
オリジナル
166 人が閲覧しました

Why Do Prototype Arrays in JavaScript Get Shared Across Class Instances?

JavaScript でのプロトタイプ共有を理解する: プロトタイプから継承されるオブジェクト

JavaScript では、オブジェクトはプロトタイプからプロパティを継承します。考慮すべき点の 1 つは、プロトタイプ プロパティとして定義された配列がクラス インスタンス内でどのように動作するかです。

ご覧のとおり、プロトタイプ化された配列は個々のクラス インスタンスにプライベートではなく、すべてのインスタンス間で共有されます。この動作は、オブジェクトのプロトタイプがオブジェクト自体として機能するために発生します。プロトタイプ プロパティは、その特定のプロトタイプから派生したすべてのオブジェクトで共有されます。

次の例を考えてみましょう:

function Sandwich() {

    // Uncomment this to fix the problem
    //this.ingredients = [];

}

Sandwich.prototype = {

    "ingredients" : [],
    "addIngredients" : function( ingArray ) {

        for( var key in ingArray ) {

            this.addIngredient( ingArray[ key ] );

        }

    },
    "addIngredient" : function( thing ) {

        this.ingredients.push( thing );

    }

}
ログイン後にコピー

この例では、「inredients」という名前の配列が、次のプロトタイプ プロパティとして定義されています。 「サンドイッチ」機能。 「this.ingredients = [];」の場合コンストラクター内でコメントアウトされている場合、次の動作が発生します。

「Sandwich」の新しいインスタンス (「cheeseburger」や「blt」など) が作成されると、これらのインスタンスは最初に「ingredients」配列を継承します。原型。 「チーズバーガー」に材料を追加するなど、この配列に加えられた変更は、他のすべての「サンドイッチ」インスタンスの「材料」配列にも影響します。この共有動作は、すべてのインスタンスが個々のコピーではなく同じ配列を参照するという事実から生じます。

この問題を解決してインスタンスごとに個別の配列を作成するには、コンストラクター内で「ingredients」配列を定義する必要があります。

function Sandwich() {

    this.ingredients = [];

}
ログイン後にコピー

この変更により、構築中に新しい配列が「Sandwich」の各インスタンスに割り当てられ、「ingredients」配列に加えられた変更がインスタンス固有であることが保証されます。

要約すると、次のようになります。プロトタイプのプロパティとして定義された配列は、そのプロトタイプを継承するすべてのオブジェクト間で共有されます。配列などのインスタンス固有のデータを作成するには、コンストラクター内でデータを定義する必要があります。この理解は、JavaScript で継承とオブジェクト指向プログラミングを効果的に使用するために非常に重要です。

以上がJavaScript のプロトタイプ配列がクラス インスタンス間で共有されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート