js でオブジェクトとオブジェクト メソッドを作成するいくつかの方法の詳細な説明

js でオブジェクトとオブジェクト メソッドを作成するいくつかの方法の詳細な説明

この記事は、JS レッドブックの第 8 章に記載されているオブジェクトに関する 2 番目の記事です。

オブジェクトを作成するためのいくつかのモード:

ファクトリーパターン:

ファクトリーとは機能を意味します。ファクトリー パターンの中核は、新しいオブジェクトを返す関数を定義することです。

 関数 getObj(名前, 年齢) {
  obj = {} とします
  obj.name = 名前
  obj.age = 年齢
  オブジェクトを返す
 }
 person1 = getObj("cc", 31) とします。

デメリット: 新しく作成されたオブジェクトのタイプがわからない

コンストラクターパターン:

コンストラクターを通じてオブジェクト インスタンスを取得します。
コンストラクターとファクトリー パターンの違いは次のとおりです。
1. コンストラクタ関数本体にこれを追加します
2. コンストラクタには戻り値がない
3. コンストラクタを呼び出すときは、newキーワードを使用します。

 関数 CreateObj(名前, 年齢) {
  this.name = 名前
  this.age = 年齢
 }
 person1 = new CreateObj("cc", 31) とします。
 コンソールログ(人1)
 console.log(person1.constructor === CreateObj); // 真
 console.log(person1 instanceof CreateObj); // 真

コンストラクターに関する 2 つの質問:

1. コンストラクターと通常の関数の唯一の違いは、呼び出しメソッドです。コンストラクターは new キーワードを使用する必要があります。 new が使用されない場合、属性は Global オブジェクトに追加されます。次の例では、CreateObj メソッドは、window オブジェクトに name 属性と age 属性を追加します。

 関数 CreateObj(名前, 年齢) {
  this.name = 名前
  this.age = 年齢
 }
 オブジェクトを作成します('cc', 10)
 console.log(ウィンドウ名) // 'cc'

2. コンストラクターの問題: コンストラクター内のメソッドは、インスタンスが作成されるたびに 1 回作成されます。

person1.sayName() === person2.sayName() // 偽

解決策は、createObj の外部で sayName を定義することです。

 関数 sayName() {
  console.log(この名前)
 }
 関数 CreatePerson(名前, 年齢) {
  this.name = 名前
  this.age = 年齢
  this.sayName = 言う名前
 }
 person1 = 新しい CreatePerson('joy', 31) を作成します。
 person1.名前を言う()

ただし、これにより、カスタム タイプによって参照されるコードが適切にグループ化されなくなります。

プロトタイプモード:

原則として、すべての関数にはプロトタイプ プロパティがあります。プロトタイプは、プロパティとメソッドがすべてのインスタンスで共有されるオブジェクトです。
プロトタイプ パターンに関する方程式は 2 つあります。

 関数Person() { }
 person1 = 新しいPerson() とする
 console.log(person1.__proto__ === Person.prototype) // true
 console.log(Person.prototype.constructor === Person); // 真

プロトタイプ オブジェクトに関する 3 つのメソッド: isPrototype、getPrototypeof、setPrototypeOf、Object.create()

// isPrototypeOf は、コンストラクタのプロトタイプ オブジェクトがインスタンス関数 Person() のプロトタイプ オブジェクトであるかどうかを判断します {}
 person1 = 新しいPerson() とする
 console.log(Person.prototype.isPrototypeOf(person1)); // 真
// オブジェクトのプロトタイプオブジェクトを取得する function Person() {}
 person1 = 新しいPerson() とする
 console.log(Object.getPrototypeOf(person1) === Person.prototype);
// オブジェクトを別のオブジェクトのプロトタイプオブジェクトとして設定する let person1 = {name: "cc"}
 person2 = {年齢: 32} とします。
 オブジェクト.setPrototypeOf(人1,人2)
 console.log(person1.name, person1.age); // cc 32
// オブジェクトをプロトタイプとして新しいオブジェクトを作成する。オブジェクトlet person1 = {name: "cc"}
 person2 = Object.create(person1) とします。
 人2.年齢 = 30
 コンソールにログ出力します。

オブジェクト person の名前属性にアクセスする場合は、次の手順に従います。
1. person に name 属性がある場合 (この属性が null であっても null が返されます)、name 属性の値を返します。そうでない場合は、プロトタイプ オブジェクト Person.prototype で引き続き検索します。
2. プロトタイプに名前属性がある場合は、プロトタイプの名前属性値を返します。ない場合は、undefined を返します。

プロパティがインスタンス上にあるかプロトタイプ上にあるかを判断するには、hasOwnPropertyを使用します。

 関数 Person() {}
 Person.prototype.name = "cc"
 person1 = 新しいPerson() とする
 console.log(person1.name) // 'cc'
 console.log(person1.hasOwnProperty("name")); // 偽

オブジェクトが特定の属性を持っているかどうかを判断するには、in演算子を使用します。

// オブジェクト自体またはプロトタイプで見つかった場合は true を返します 
関数 Person() {}
 Person.prototype.name = "cc"
 person1 = 新しいPerson() とする
 console.log("name" in person1) // true
 console.log(person1.hasOwnProperty("name")); // 偽

オブジェクトのプロパティにアクセスするためのメソッド:

オブジェクト.keys()
for ... in // 継承されたプロパティも走査されます Object.getOwnPropertyNames(obj) // 列挙可能なプロパティと列挙不可能なプロパティの両方をリストし、残りは Object.keys() と同じです Object.getOwnPropertySymbols(obj) // getOwnPropertyNames に似ていますが、シンボルのみを対象としています
Reflect.ownKeys(obj) // Object.keys() と同じ結果

オブジェクトのプロパティとプロパティ値にアクセスする他の方法:
Object.values() は、Symbol 型を省略したオブジェクト値の配列です。
Object.entries() はオブジェクトのキーと値のペアの配列であり、Symbol 型を省略してキーを文字列に変換します。

 関数 Person() {}
 Person.prototype.name = "cc"
 person = 新しいPerson() を作成します。
 人.年齢 = 21
 sy = シンボル('sy')とします。
 人[sy] = '笑顔'
 console.log(Object.values(person)) // [ 21 ]
 console.log(Object.entries(person)) // [ [ '年齢', 21 ] ]

これで、js でオブジェクトを作成するいくつかの方法と手法に関するこの記事は終了です。js でオブジェクトを作成するためのより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js でオブジェクトを作成するさまざまな方法とその長所と短所のまとめ
  • JavaScriptオブジェクト指向オブジェクト作成方法のまとめ
  • JSで関数とオブジェクトを作成する方法
  • JavaScript オブジェクト作成方法のまとめ [ファクトリパターン、コンストラクターパターン、プロトタイプパターンなど]
  • JavaScript でオブジェクトを作成する一般的な方法の概要
  • JavaScript でカスタム オブジェクトを作成する一般的な方法の概要
  • JavaScript でオブジェクトを作成する 7 つの方法の包括的な概要
  • JS オブジェクトを作成するための一般的な方法と原則の分析
  • JavaScript でオブジェクトを作成する 7 つの方法 (推奨)
  • JS でオブジェクトを作成する 4 つの方法

<<:  Docker データ管理 (データ ボリュームとデータ ボリューム コンテナー) の詳細な説明

>>:  MySQLはinet_atonとinet_ntoaを使用してIPアドレスデータを処理します。

推薦する

分散監視システムにおけるZabbixのアクティブ、パッシブ、Web監視のプロセスの詳細な説明

前回の記事では、Zabbix のネットワーク検出機能について学習し、アクションと組み合わせてホストの...

Baidu サイト検索が https をサポートしていない問題の解決策 (テスト済み)

最近、携帯電話で https が有効になりました。緑色のロックを取得するには、次の問題を解決する必要...

mysql 5.6.21 のインストールと設定の詳細な手順

1. 概要MySQL バージョン: 5.6.21ダウンロードアドレス: https://dev.my...

Vueドロップダウンリストの2つの実装方法の比較

Vueドロップダウンリストの2つの実装最初の方法はv-forを使用する <el-select ...

VUE ユニアプリライフサイクルに関する簡単な説明

目次1. アプリケーションライフサイクル2. ページのライフサイクルコンポーネントライフサイクル要約...

MySQL で指定エンコーディングを実装する際の落とし穴について

前面に書かれた環境: MySQL 5.7+、MySQL データベースの文字エンコードは utf8、テ...

Ubuntuのインストール Matlab2020b の詳細なチュートリアルとリソース

目次1. リソースファイル2. インストール2.1 詳細な手順2.1.1 ディスクイメージのマウント...

複数のフィールドを変更するためのMysql更新の構文の詳細な分析

MySQL でレコードを更新すると、構文は正しいのですが、レコードが更新されません...質問文実行前...

HTML+CSS+JS でスタックカルーセル効果を実装するサンプルコード

効果:スライドショーが一方向に動く場合、各画像のサイズ、位置、透明度、レベルを変更する必要があります...

Docker での RocketMQ の詳細なインストールと使用

RocketMQ イメージを検索するには、Docker の hub.docker.com で検索する...

Dockerイメージのエクスポートとインポート操作

基本イメージが以前に構成されていて、これらのイメージが他の場所でも必要な場合はどうなりますか?回答:...

Jenkins でユーザー ロールの権限を設定する方法

Jenkinsのユーザーロール権限の設定には、ロール戦略プラグインのインストールが必要です。 1.ロ...

Linuxはlsof/extundeleteツールを使用して、誤って削除されたファイルやディレクトリを復元します。

序文Linux には Windows のような目立つごみ箱がないため、簡単に復元することはできません...

Vueでシングルサインオンを実装する方法のまとめ

最近プロジェクトが中断され、RageFrame の研究は一時的に終了しました。この記事では、シングル...

MySQLの明示的な型変換の簡単な分析

CAST関数前回の記事では、型変換を表示するために使用する CAST 関数について説明しました。暗黙...