ホームページ > ウェブフロントエンド > jsチュートリアル > プレーンな JavaScript オブジェクトをクラスのインスタンスにキャストするにはどうすればよいですか?

プレーンな JavaScript オブジェクトをクラスのインスタンスにキャストするにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-10-18 13:02:02
オリジナル
1085 人が閲覧しました

How to Cast Plain JavaScript Objects into Instances of Classes?

JavaScript でプレーン オブジェクトをクラス インスタンスにキャストする

JavaScript でプレーン オブジェクトから実際のインスタンスを作成することは可能ですが、特定の課題が伴います。実際のシナリオとその解決策を見てみましょう。

問題

2 つのクラス、人物と動物について考えてみましょう。サーバーは汎用の Person オブジェクトの配列を返します:

[
  { personName: "John", animals: [{ animalName: "cheetah" }, { animalName: "giraffe" }] },
  { personName: "Smith", animals: [{ animalName: "cat" }, { animalName: "dog" }] }
]
ログイン後にコピー

目的は、このオブジェクト配列を Person インスタンスの型付き配列にキャストして、person[0].Animals[2].Run などの呼び出しを可能にすることです。 ().

解決策

プレーン オブジェクトからインスタンスを作成するには、コンストラクターを呼び出してプロパティを正しく割り当てる必要があります。

一般的なアプローチは、コンストラクターにインスタンスに似たオブジェクトを受け入れさせ、クローンを作成することです。彼ら。内部インスタンス作成ロジックはコンストラクターによって処理されます。

カスタム メソッド

別の解決策は、オブジェクトを取得してインスタンスを生成する静的メソッドを Person クラスに作成することです。

Person.fromJSON = function(obj) {
  // Custom code to create instances based on `obj`
  return ...;
};
ログイン後にコピー

基本的なケースに対する簡単なアプローチ

今回のような、コンストラクターがなくパブリック プロパティのみがある単純なケースでは、次のようにすることができます。

var personInstance = new Person();
for (var prop in personLiteral)
  personInstance[prop] = personLiteral[prop];
ログイン後にコピー

または、Object を使用することもできます。 assign:

var personInstance = Object.assign(new Person(), personLiteral);
ログイン後にコピー

同様のアプローチに従って、Animal インスタンスを作成します。

その他の実装

JSON はクラス情報を伝えないため、オブジェクト構造を事前に設定しておきます。あなたの場合、実装は次のようになります。

var persons = JSON.parse(serverResponse);
for (var i=0; i<persons.length; i++) {
  persons[i] = $.extend(new Person, persons[i]);
  for (var j=0; j<persons[i].animals; j++) {
    persons[i].animals[j] = $.extend(new Animal, persons[i].animals[j]);
  }
}
ログイン後にコピー

追加メモ

Animal クラスは、各インスタンスではなくプロトタイプで run メソッドを定義する可能性があります。

以上がプレーンな JavaScript オブジェクトをクラスのインスタンスにキャストするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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