この記事は、JS レッドブックの第 8 章に記載されているオブジェクトに関する 2 番目の記事です。 オブジェクトを作成するためのいくつかのモード:ファクトリーパターン:ファクトリーとは機能を意味します。ファクトリー パターンの中核は、新しいオブジェクトを返す関数を定義することです。 関数 getObj(名前, 年齢) { obj = {} とします obj.name = 名前 obj.age = 年齢 オブジェクトを返す } person1 = getObj("cc", 31) とします。 デメリット: 新しく作成されたオブジェクトのタイプがわからない コンストラクターパターン:コンストラクターを通じてオブジェクト インスタンスを取得します。 関数 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.名前を言う() ただし、これにより、カスタム タイプによって参照されるコードが適切にグループ化されなくなります。 プロトタイプモード:原則として、すべての関数にはプロトタイプ プロパティがあります。プロトタイプは、プロパティとメソッドがすべてのインスタンスで共有されるオブジェクトです。 関数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 の名前属性にアクセスする場合は、次の手順に従います。 プロパティがインスタンス上にあるかプロトタイプ上にあるかを判断するには、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() と同じ結果 オブジェクトのプロパティとプロパティ値にアクセスする他の方法: 関数 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Docker データ管理 (データ ボリュームとデータ ボリューム コンテナー) の詳細な説明
>>: MySQLはinet_atonとinet_ntoaを使用してIPアドレスデータを処理します。
目次1. カスタム指示の登録1.1. グローバルカスタム指示1.2. ローカルカスタム指示2. カス...
CSS 3.0 とビデオを組み合わせて実現したクリエイティブなオープニングをご紹介します。効果は次の...
1.すべてのIPアドレスが3つのページa1.htm、a2.htm、a3.htmにアクセスするのを禁止...
誰についてシステムにログインしているユーザーを表示します。 who コマンドを実行すると、現在システ...
1. CSS背景タグ1.背景色を設定するbackground-ground-color プロパティは...
目次MySql8.0 トランザクション分離レベルエラーの表示質問コマンドは次のように変更されますMy...
現在の需要:グループとファクターの 2 つのテーブルがあります。1 つのグループは複数のファクターに...
この記事では、プラグインを使用して画像の比例カットを実現するVueの具体的なコードを参考までに共有し...
JavaScript では、要素の removeAttribute() メソッドを使用して、指定され...
問題: JDBCを使用してMySQLデータベースに接続すると、中国語の文字を挿入すると文字化けした文...
<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...
目次抽象化と再利用シリアルセグメントシリアル、セグメントパラレル要約するはじめに: JS は当然並列...
前回の記事では、JS を使って簡単な揺れ効果を実現する方法を紹介しました。ご興味があればクリックして...
かなり前の記事で、 -webkit-box-reflectプロパティについて説明しました。リフレクシ...
隠れる前に:隠れた後: CS: ...コードをコピーコードは次のとおりです。オーバーフロー:非表示;...