js での Object.create インスタンスの使用法の詳細な説明

js での Object.create インスタンスの使用法の詳細な説明

1. Object.create() メソッドを使用して新しいオブジェクトを作成し、既存のオブジェクトを使用して新しいオブジェクトの proto を提供します。

2. 2 つのパラメータを指定します。1 つ目は新しく作成されたプロトタイプ オブジェクトであり、2 つ目は新しく作成されたオブジェクトにプロパティを追加するオブジェクトです。

// 父オブジェクト let father = {
    名前: 「父」
    友人: ['アビー', 'ボブ']
}
 
// 新しいインスタンスオブジェクトchild1を生成する
子1 = Object.create(父) とします。
 
// 値タイプ属性を変更する child1.name = '変更された名前'
console.log(child1.name) // 変更された名前
 
// 参照型の値を変更する child1.friend.push('chely')
console.log(child1.friend) //[ 'アビー', 'ボブ', 'チェリー' ]
 
// 新しいインスタンスオブジェクトchild2を生成する
child2 = Object.create(father) とします。
console.log(child2.name) //父親
console.log(child2.friend) //[ 'アビー', 'ボブ', 'チェリー' ]

知識ポイントの拡張:

Object.create()はメソッドインスタンスを作成する

定数人 = {
  isHuman: 偽、
  printIntroduction: 関数() {
    console.log(`私の名前は${this.name}です。私は人間ですか? ${this.isHuman}`);
  }
};

const me = Object.create(人);

me.name = 'Matthew'; // "name" は "me" に設定されているプロパティですが、"person" には設定されていません
me.isHuman = true; // 継承されたプロパティは上書きできます

me.printIntroduction();
// 期待される出力: "私の名前はマシューです。私は人間ですか? true"

運用結果

> 「私の名前はマシューです。私は人間ですか?本当ですか?」

js の Object.create インスタンスの詳細な使用法に関するこの記事はこれで終わりです。js の Object.create メソッドの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript オブジェクトを作成する新しい方法: Object.create()
  • JavaScript で Object.create() を使用してオブジェクトを作成する方法の紹介
  • JavaScript デザイン パターン プロトタイプ パターン (Object.create と prototype) の紹介

<<:  MySQL の遅いクエリを見つける方法

>>:  nginx proxy_pass 設定で URL が / で終わる場合と / なしで終わる場合の違いの詳細な説明

推薦する

MySQLの分離レベルとロックメカニズムの詳細な説明

目次簡単な説明: 1. 取引の4つの特徴2. 複数の同時トランザクションによって発生する問題3. ト...

JavaScript が Xiaomi のカルーセル効果を模倣

この記事は、透明度を変えてカルーセルにするXiaomiカルーセルを真似て書いたものです。初心者なので...

MySQL 5.7.18 zip バージョンのインストール チュートリアル

MySQL の mysql 5.7.18 zip バージョンは、クリックして次のステップをクリックし...

パスワードログインなしのLinux構成スタンドアロンおよびフルディストリビューションの詳細なチュートリアル

目次1: 単一マシンのパスワードフリーログイン構成1. 仮想マシンのホスト名を設定する2. 仮想マシ...

FastApi+Vue+LayUIを使用してフロントエンドとバックエンドを分離するサンプルコード

目次序文プロジェクト設計後部フロントエンドプロジェクトを実行する質疑応答序文これまでの API 開発...

Nginx の負荷分散と動的および静的分離の原理と構成

目次1. Nginxは負荷分散の原則を実装する2. Nginxの動的および静的分離の原則Nginx ...

3つのDocker Nginxログの処理の詳細な説明

社内の同僚は Nginx ログの標準出力、つまりコンソール経由の処理を必要としているため、まずログを...

mysql バックアップ スクリプトを作成し、7 日間保存します。

スクリプトの要件: MySQL データベースを毎日バックアップし、スクリプトを 7 日間保存します。...

HTML リスト ボックス、テキスト フィールド、ファイル フィールドのサンプル コード

ドロップダウンボックス、テキストフィールド、ファイルフィールド 上半分はデモンストレーション効果、下...

CSSでフォントアイコンを使用する方法をお教えします

まず、フォントアイコンとは何でしょうか?表面的にはアイコンですが、実際はテキストです。テキストの設定...

Vue はボタンをクリックしてファイルをダウンロードする操作コードを実装します (バックエンド Java)

前回の記事では、ボタンをクリックしてファイルをダウンロードするVueの機能を紹介しました。今日は、ボ...

SQL実行ステップの詳細な分析

SQL実行ステップの詳細な分析まず、ステートメントが実行される順序を見てみましょう。 (8)選択する...

PhpStormがVirtualBoxに接続できない問題を解決する

問題の説明: phpstorm の SFTP ホストを 192.168.122.1 に設定すると、接...

HTMLの基礎: HTMLの基本構造

HTML ハイパーテキスト ドキュメントの基本構造は、ドキュメント ヘッダーとドキュメント本体の 2...

MySQLで日付を比較する方法の詳細な説明

データ型が datetime であるフィールド add_time を持つテーブル product が...