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 の一般的な問題とアプリケーション スキルの概要

推薦する

CentOS7環境にMySQL5.5データベースをインストールする

目次1. 現在のシステムにMySQLがインストールされているかどうかを確認する2. インストールされ...

HTML/CSS での空白処理とページ内の空白を保持する方法

HTML の空白ルールHTML では、コンテンツ内の複数のスペースは通常 1 つとみなされ、連続する...

MySQL 文字セットの表示と変更のチュートリアル

1. 文字セットを確認する1. MYSQLデータベースサーバーとデータベースの文字セットを確認する方...

Vue ユニットテストに関する予備調査

目次序文なぜユニットテストを導入するのですか?ユニットテストの概要テスト開発パターン1. テスト駆動...

MySQL ステートメントを使用して、さまざまな整数が占めるバイト数とその最大値と最小値を調べる例

直接コード: タイプとして「bigint unsigned」、バイトとして「8」、max_numとし...

mysqlタイムスタンプの使用

序文:タイムスタンプ フィールドは、MySQL でよく使用されます。たとえば、データ行が作成または変...

リアクトルーティングガード(ルーティングインターセプション)の実装

React は Vue とは異なります。ルートにメタ文字を設定することでルートインターセプションを実...

CentOS プラットフォーム上で LAMP 環境を素早く構築する方法

この記事では、例を使用して、CentOS プラットフォーム上で LAMP 環境を迅速に構築する方法に...

Javascriptの基礎を学ぶための10の重要な質問

目次1. Javascript とは何ですか? 2. DOMとは何か3. JSコードの実行方法4. ...

チェックボックスの選択またはキャンセルを実装するJavaScript

この記事では、すべてのチェックボックスを選択または解除するためのJavaScriptの具体的なコード...

フロントエンドネットワーク、JavaScriptの最適化、開発のヒントについて簡単に説明します。

1. ネットワークの最適化YSlowには23のルールがあります。これら数十のルールは、主に、不要な...

HTML ページの先頭に戻るいくつかの実装の概要

最近、ウェブサイトを開発する際にトップに戻るボタンを作成する必要がありますが、私は主にバックエンドの...

MySQL トリガーの基本的な使い方(作成、表示、削除など)の詳細な説明

目次1. MySQLトリガーの作成: 1. MySQLトリガー作成構文: 2. MySQL作成構文の...

pdf.js を使用して Vue で PDF ファイルをプレビューする方法

ページ上で PDF をプレビューすると、一部のファイルは印刷またはダウンロードできません。現時点では...