ホームページ > ウェブフロントエンド > jsチュートリアル > Crockford のプロトタイプ継承でネストされたオブジェクトを変更するときの予期せぬ動作を回避するにはどうすればよいですか?

Crockford のプロトタイプ継承でネストされたオブジェクトを変更するときの予期せぬ動作を回避するにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-12-31 08:57:09
オリジナル
478 人が閲覧しました

How to Avoid Unexpected Behavior When Modifying Nested Objects in Crockford's Prototypal Inheritance?

Crockford のプロトタイプ継承: ネストの問題への対処

Douglas Crockford のプロトタイプ継承の概念は、「Object.create」関数で例示されるように、オブジェクト作成への簡略化されたアプローチを提供します。ただし、この継承フレームワークでネストされたオブジェクトを処理する場合、ユーザーは問題に遭遇する可能性があります。具体的には、ネストされたオブジェクトの値を上書きすると、プロトタイプ チェーンに沿った他のオブジェクトに影響し、予期しない結果が生じる可能性があります。

この懸念を説明するために、次のコード スニペットを考えてみましょう。

// Flat object
var flatObj = {
    firstname: "John",
    lastname: "Doe",
    age: 23
}

// Nested object
var nestObj = {
    sex: "female",
    info: {
        firstname: "Jane",
        lastname: "Dough",
        age: 32  
    }
}
ログイン後にコピー

このシナリオでは、 「Object.create」を使用して新しいオブジェクトを作成し、ネストされたオブジェクトの値を変更しようとすると、プロトタイプ オブジェクトに意図しない変更が発生します:

// Objects created using Object.create
var person1 = Object.create(flatObj);  // Flat object inheritance
var person2 = Object.create(nestObj);  // Nested object inheritance

// Overwriting nested object values
person1.age = 69;
person2.info.age = 96;

// Prototype objects have been modified
console.log(nestObj.info.age);  // Outputs 96 instead of 32
ログイン後にコピー

コアこの問題は、ネストされたオブジェクトを含むすべてのオブジェクトが標準のオブジェクト プロパティのように扱われるという事実に起因します。ネストされたオブジェクトの値を変更すると、変更は現在のオブジェクトだけでなく、同じプロトタイプから継承する他のオブジェクトにも反映されます。

したがって、独立したネストされたオブジェクトを維持したい場合は、次のことが重要です。継承に依存する代わりに、新しいオブジェクトを作成します。例:

// Creating an independent nested object
person3 = {
    sex: "male",
    info: Object.create(nestObj2.info)  // Create a new object for the nested "info" property
}
ログイン後にコピー

これにより、ネストされたオブジェクト値への変更は特定のオブジェクトにのみ影響し、プロトタイプ チェーンまで伝播されなくなります。

以上がCrockford のプロトタイプ継承でネストされたオブジェクトを変更するときの予期せぬ動作を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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