JavaScript でプロトタイプ パターンを実装する方法

JavaScript でプロトタイプ パターンを実装する方法

概要

プロトタイプ パターンは、プロトタイプ インスタンスによって作成されるオブジェクトの型を指し、これらのプロトタイプをコピーすることで新しいオブジェクトが作成されます。これは、オブジェクトを作成する、つまり、別のオブジェクトのプロトタイプ プロパティとしてオブジェクトを作成するために使用されるパターンです。

プロトタイプの警告: プロトタイプ モードについて学習する前に、まずプロトタイプ、プロトタイプ チェーン、プロトタイプ、__proto__、コンストラクターなどの知識について学習する必要があります。

プロトタイプパターンの実装

ES5 API: Object.create(プロトタイプ、オプションのDescriptorObjects)

Object.create() メソッドは 2 つのパラメータを受け取ります。最初のパラメータは __proto__ オブジェクトで、2 番目は prototiesObject です (オプション。2 番目のパラメータは追加のプロパティを初期化するために使用でき、リテラル オブジェクト形式を受け入れます)。

var 車両プロトタイプ = {
    モデル:"ポルシェ",
    getModel: 関数 () {
        console.log('車両モデルは: ' + this.model);
    }
};

var 車両 = Object.create(車両プロトタイプ,{
    "モデル":{
        値:"フェラーリ"
    }
});

automobile.getModel(); // 車両モデル: Ferrari

実際に新しいオブジェクト automobilePrototype を作成するには Object.create を使用し、vehiclePrototype のメソッドを継承します。つまり、この時点では、vehicle.__proto__ == automobilePrototype; です。

2 番目のパラメータで「model」の値が初期化され、model の値が「Ferrari」に初期化されるため、この時点で新しく作成されたオブジェクト automobilePrototype にはモデルが 1 つだけ存在し、値は「Ferrari」になります。

Object.create() を使用する代わりに、プロトタイプを使用します。

var 車両プロトタイプ = {
    init: 関数 (carModel) {
        this.model = carModel || "ポルシェ";
    },
    getModel: 関数 () {
        console.log('車両モデルは: ' + this.model);
    }

};

関数 車両(モデル) {
    関数F(){};
    F.prototype = 車両プロトタイプ;    
    var f = 新しい F();
    f.init(モデル);
    f を返します。
}
var 車 = 車両('フェラーリ');
car.getModel(); // 車両モデルは: Ferrari

上記のコードでは、コアが車両にあることがわかります。最初に新しいコンストラクタを作成し、関数のプロトタイプをvehiclePrototypeにポイントし、関数をインスタンス化し、最後に継承後にプロトタイプのinitメソッドを呼び出します。最後に、実行結果を返すこともできます。

要約する

プロトタイプ パターンは JavaScript に広く普及しており、他の多くのパターンもプロトタイプに基づいて実装されているため、プロトタイプ、__proto__、コンストラクターなどの主要な属性の知識ポイントに重点を置いて、プロトタイプとプロトタイプ チェーンの知識を学習して復習することが重要です。

以上がJavaScriptでプロトタイプパターンを実装する方法の詳細です。JavaScriptプロトタイプパターンの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JavaScript デザインパターン コマンドパターン
  • JavaScript デザインパターン - コマンドパターンの原則と使用例の分析
  • JavaScriptコマンドモードの原理と使用例の詳細な説明
  • JavaScript デザインパターン コマンドパターン例分析
  • JS デザイン パターンにおけるコマンド モードの概念と使用法の分析
  • JS コマンド モードのサンプル メニュー プログラム
  • JavaScript デザインパターン クラシックコマンドパターン
  • JavaScript徹底理解シリーズ(34):デザインパターンのコマンドモードを詳しく解説
  • JavaScript でオブザーバー パターンを実装する方法
  • Javascript実践におけるコマンドモードの詳しい説明

<<:  CentOS7 に Redis をインストールして設定する方法

>>:  MySQL の一般的な問題とアプリケーション スキルの概要

推薦する

WeChatミニプログラムの開発をスピードアップするためのヒント

1. app.jsonを使用してページを作成する私たちの通常の開発習慣によれば、新しいページを作成す...

Python Flask WeChat アプレットのログインプロセスとログイン API 実装コード

1. まずは効果を見てみましょうインターフェース要求によって返されるデータ: 2. 公式ログインフロ...

仮想マシンを作成し、VMware に Redhat Linux オペレーティング システムをインストールする (グラフィック チュートリアル)

VMware で仮想マシンを作成し、Redhat Linux オペレーティング システムをインスト...

Linux/Mac に MySQL をインストールするときにパスワードを忘れた場合の解決策

序文この記事では主に、Linux/Mac に MySQL をインストールするときにパスワードを忘れた...

行の高さと垂直方向の配置に関する包括的な理解

前の単語line-height、font-size、vertical-align は、インライン要素...

Vueのコンポーネントのprops属性について詳しく説明します

目次質問1: 小道具は具体的にどのように使用されますか?原理は何ですか?下を見る質問 2: 年齢に ...

CentOS7.5にHarbor1.7をインストールして設定するプロセス全体

1. 必要なパッケージをダウンロードする wget -P /usr/local https://st...

最新の超詳細な VMware 仮想マシンのダウンロードとインストールのグラフィック チュートリアル

目次1. 仮想マシンをダウンロードする2. 仮想マシンのインストールVMware のダウンロードとイ...

全画面ページのスクロール効果を実現するJavaScript

JavaScript DOM を読み終えた後、解釈型 JavaScript スクリプト言語に対する...

HTMLの基礎 HTMLの構造

HTML ファイルとは何ですか? HTML は Hyper Text Markup Language...

MySQL インデックス プッシュダウンを 5 分で学ぶ

目次序文インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックス...

VMware 仮想マシンに CentOS と Qt をインストールするチュートリアル図

VMware のインストールパッケージのインストールダウンロードアドレス: https://www....

ウェブサイト構築経験概要

<br />注目を集めるウェブサイトを作成するには、どのような原則に従うべきでしょうか?...

InnoDB テーブルの BLOB 列と TEXT 列のストレージ効率を最適化します。

まず、MySQL InnoDB エンジンのストレージ形式に関する重要なポイントをいくつか紹介します。...

Linux での JDK のインストール (OpenJDK のアンインストールを含む) の概要

1. openjdkを表示する rpm -qa|grep jdk 2. openjdk を削除します...