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

推薦する

win10 mysql 5.6.35 winx64 無料インストールバージョン設定チュートリアル

mysql 5.6.35 winx64無料インストールバージョン構成チュートリアルwin10、具体的...

レスポンシブ Web デザインが価値のない 5 つの理由

この記事は Tom Ewer の Managewp ブログからのもので、現在人気のレスポンシブ デザ...

DockerでGit環境を構築して構成するプロセス

DockerでGit環境を構成する仕事上、Docker 環境で GitLab リポジトリを操作する必...

MySQL 永続統計の詳細な説明

1. 永続的な統計情報の重要性:統計は、MySQL が実行プランを生成するためのガイドとして使用され...

VueはElementUIのフォームサンプルコードを模倣する

実装要件ElementUI を模倣したフォームは、インデックス コンポーネント、Form フォーム ...

Node.js での SerialPort モジュールの使用

目次目的モジュールのインストール基本的な使い方ポートをスキャンする開いているポートデータの送信データ...

MySQL で binlog を使用する際のフォーマットの選択方法

目次1. binlogの3つのモード1.ステートメントレベルモード2. 行レベルモード3. 混合モー...

JavaScript の条件付きアクセス属性と矢印関数の紹介

目次1. 条件付きアクセス属性2. アロー関数の紹介1. 条件付きアクセス属性?. は ES2020...

ins タグと del タグの属性と使用法

insとdel は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、また...

HTML でのテキストエリアの使用と一般的な問題およびケース分析

textarea タグはよく使われる HTML タグです。主に長いテキストを入力するときに改行するた...

MySQLのインデックス設計の原則と一般的なインデックスの違いについて簡単に説明します。

インデックス定義: ディスク上に保存される個別のデータベース構造であり、データ テーブル内のすべての...

Centos7.3 で mysql5.7.18 をインストールして初期パスワードを変更する方法

この記事では、Centos7.3でのmysql5.7.18のインストールと初期パスワードの変更につい...

Reactフック入門チュートリアル

ステートフック例: 'react' から useState をインポートします。 関...

Linux環境でタイムゾーンを設定できない問題を解決

Linuxでタイムゾーンを変更する場合、常に変更することはできませんAsia/Shanghai に変...

MySQL の繰り返し読み取りレベルでファントム読み取りを解決できますか?

導入データベース理論についてさらに学んでいくうちに、さまざまな分離レベルによって起こり得る問題につい...