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

推薦する

CSS で垂直方向の中央揃えを実装するいくつかの方法の概要

フロントエンドのレイアウト プロセスでは、水平方向の中央揃えを実現するのは比較的簡単で、通常は ma...

Vue3のレスポンシブ原則の詳細な説明

目次Vue2 レスポンシブ原則のレビューVue3 レスポンシブ原則の分析ネストされたオブジェクトの応...

MySQL の sql_mode モード例の詳細な説明

この記事では、MySQL の sql_mode モードについて例を挙げて説明します。ご参考までに、詳...

MySQLで置換関数を実装するためのいくつかの実用的なシナリオ

REPLACE構文REPLACE(String,from_str,to_str)つまり、String...

el-table カプセル化に基づくドラッグ可能な行と列、および選択列コンポーネントの実装

効果環境が必要ビュー要素UIドラッグアンドドロッププラグインSortable.js必要な構成プロパテ...

IdeaはリモートDockerをデプロイし、ファイルを構成する

1. LinuxサーバーのDocker構成ファイルを変更する vim /usr/lib/system...

MySQL マルチインスタンス構成ソリューション

1.1 MySQL マルチインスタンスとは何ですか?簡単に言うと、MySQL マルチインスタンスとは...

Linuxファイルの基本属性の知識ポイントのまとめ

Linux システムは典型的なマルチユーザー システムです。異なるユーザーは異なる立場にあり、異なる...

JS でパブリッシュ サブスクライブ モデルを作成する

目次1. シーン紹介2 コードの最適化2.1 ファンを増やす問題を解決する2.2 作品追加の問題を解...

MySQLレジストリをクリアする方法

具体的な方法: 1. [ win+r ] を押して実行ウィンドウを開き、「regedit」と入力して...

LinuxシステムにTomcatをインストールし、サービスの起動とシャットダウンを構成する

Linuxシステムでサービスの起動とシャットダウンを構成する1. コマンドcd /etc/init....

JSでユーザーを追跡する方法

目次1. 同期AJAX 2. 非同期AJAX 3. ユーザーのクリックを追跡する4. リバウンドトラ...

MySQL 8.0.17 インストール グラフィック チュートリアル

この記事では、参考までにMySQL 8.0.17のインストールグラフィックチュートリアルを紹介します...

入力ボックスのプレースホルダーテキストのデフォルトの色を変更する -webkit-input-placeholder メソッド

HTML5 では、入力用のネイティブ プレースホルダー属性が追加されており、これは高度なブラウザでサ...

MYSQL ロック解除とロックテーブルの紹介

MySQL ロックの概要他のデータベースと比較すると、MySQL のロック メカニズムは比較的単純で...