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はBEM命名規則の実践を使用する

クラスを見るとき、どのような情報を得たいですか?このクラスはどこで使用され、その機能は何ですか?この...

CSSブロッキングマージとその他の効果についての簡単な説明

非直交マージンマージンを使用するとマージが発生します次のプロパティはマージンの結合を防止します。国境...

MySQL の 2 種類の一時テーブルの使用方法の詳細な説明

外部一時テーブルCREATE TEMPORARY TABLE によって作成された一時テーブルは、外部...

Vue での props の使い方の紹介

序文: Vue では、props を使用して、もともと分離されていたコンポーネントを直列に接続するこ...

Windows および Linux での Redis のインストールとデーモン設定

# Windows および Linux 上の Redis のインストール デーモン構成Redis の...

mysqlはタイムゾーン関連の問題を解決します

序文: MySQL を使用すると、時間の表示が正しくない、タイムゾーンが GMT+8 ゾーンにない、...

Bootstrapはカルーセルの効果を実現します

この記事では、カルーセルマップの効果を実現するためのBootstrapの具体的なコードを参考までに共...

MySQLにおける(JOIN/ORDER BY)文のクエリ処理と最適化方法

EXPLAIN ステートメントは、MySQL クエリ ステートメント プロセスと EXPLAIN ス...

MySQL コマンドを使用してインデックスを作成、削除、およびクエリする方法の紹介

MySQL データベース テーブルでは、インデックスを作成、表示、再構築、削除できるため、クエリ速度...

Vue3 ベースのスクリプト設定構文 $refs の使用

目次1. Vue2 構文2. Vue3の使用1. コンポーネントのref値を設定する2. コンポーネ...

VueのVuexの4つの補助機能について

目次1. 補助機能2. 例1. mapState と mapGetters 2. mapMutati...

offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft などのプロパティの図。

注 1: 上の画像の背景全体がこの Web ページのフルサイズであり、中央の小さなボックスがブラウザ...

MySQLでインデックスエラーが発生する状況について簡単に説明します

以下に、トレーニング機関からのヒントと私自身の要約をいくつか示します。以下のインデックスの内容を説明...

Linux サーバーのスクリプトを自動的にバックアップする方法 (mysql、添付ファイルのバックアップ)

1.backup.shスクリプトファイルを作成する #!/bin/sh ソースフォルダ=/データ ...

Windows 64 ビットでの MySQL 8.0.13 のインストールと設定方法のグラフィック チュートリアル

この記事では、MySQL 8.0.13のインストールと設定のチュートリアルを参考までに紹介します。具...