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 が / で終わる場合と / なしで終わる場合の違いの詳細な説明

推薦する

React+axios は github 検索ユーザー機能を実装します (サンプル コード)

負荷リクエスト成功リクエストに失敗しました cmdをクリックし、ファイルパスでEnterキーを押しま...

Vueはファイルのアップロードとダウンロードを実装します

この記事では、参考までにVueのファイルのアップロードとダウンロードの具体的なコードを紹介します。具...

Docker は Python Flask+ nginx+uwsgi コンテナを構築します

Nginxをインストールするまずcentosイメージをプルしますdocker pull centos...

HTMLタグIDは変数にできる

<table id=" <%=var1%>">、var1...

React Router で履歴リダイレクトを使用する方法

react-routerでは、コンポーネント内のジャンプは<Link>で使用できます。し...

CSSはグラデーションを巧みに利用して高度な背景光アニメーションを実現します

成し遂げるこの効果は CSS を使用して完全に再現することは困難です。 CSS でシミュレートされた...

MySQLデータの挿入、更新、削除の詳細

目次1. 挿入2. 更新3. 削除1. 挿入 顧客に挿入( 顧客.顧客住所、 顧客.cust_cit...

インターフェーステストプラットフォームを構築するためのDjango+Vue+Dockerの詳細な説明

1. 冒頭の2つの単語みなさんこんにちは。私の名前はLin Zonglinです。私はテストエンジニア...

Vueは小さなフォーム検証機能を実装します

この記事では、フォーム検証を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...

TypeScript でオブジェクト キーの値の範囲を制限する方法

TypeScript を使用する場合、TypeScript が提供する型システムを使用してコードのあ...

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

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

Nginx ドメイン転送の使用シナリオ コード例

シナリオ 1: サーバーの制限により、外部に開かれているポートは 1 つだけですが、別の外部ネットワ...

派手なカルーセル効果を実現するJavaScript

この記事では、JavaScriptで派手なカルーセル効果を実装する2つの方法を紹介します。具体的な内...

MySQL EXPLAIN出力列の詳細な説明

1. はじめにEXPLAIN ステートメントは、MySQL がステートメントを実行する方法に関する情...

Tomcatの起動が遅い問題を素早く解決、超簡単

今日、私はクラスメートが問題を解決するのを手伝いました - Tomcat の起動が非常に遅く、約 5...