ホームページ > 記事 > ウェブフロントエンド > JSデザインパターンのコンストラクタパターンの詳細説明
今回は、JSコンストラクターパターンの設計パターンと、JSコンストラクターパターンを使用する際の注意点について詳しく説明します。実際のケースを見てみましょう。
コンセプト
コンストラクターは、特定の型のオブジェクトを作成するために使用されます。コンストラクターは、使用されるオブジェクトを宣言するだけでなく、オブジェクトの最初の作成時にオブジェクトのメンバー値を設定するパラメーターを受け入れることもできます。カスタム タイプ オブジェクトの プロパティとメソッド を宣言することもできます。
役割と注意事項
特定の種類のオブジェクトを作成するために使用されます。
初めて宣言するときにオブジェクトに値を割り当てます
パラメータを渡したり、コンストラクターを自分で宣言したり、プロパティやメソッドを割り当てることができます
注:
newの使用に注意してください
との違いsingleton
function PersonBir(name, year, month) { this.month = month; this.year = year; this.name = name; this.output= function () { return this.name + ":" + this.year +"年"+ this.month+"月"; }; }var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4); console.log(ming.output()); console.log(gang.output());1234567891011121314これは関数を構築する最も簡単な方法ですが、継承するときに問題が発生すると感じませんか?プロトタイプを介して作成されたオブジェクトに出力メソッドを追加できます。次のコードを見てください
function PersonBir(name, year, month) { this.month = month; this.year = year; this.name = name; } PersonBir.prototype.output=function(){ return this.name + ":" + this.year +"年"+ this.month+"月"; }var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4); console.log(ming.output()); console.log(gang.output());123456789101112このようにして、出力された単一のインスタンスを共有して、コンストラクターに名前を付けるときに関数を使用します。通常の機能と区別するために、名前は大文字で表記されています。 new 演算子の使用を強制する
コンストラクターで new 演算子を使用するために、次のコードを見てみましょう。目的を達成するために、この値の instanceof が personBir であるかどうかを判断して、new 演算子の使用を強制します。 。
function PersonBir(name, year, month) { //核心代码,如果为假,就创建一个新的实例返回。 if(!(this instanceof PersonBir)){ return new PersonBir(name, year, month); } this.month = month; this.year = year; this.name = name; } PersonBir.prototype.output=function(){ return this.name + ":" + this.year +"年"+ this.month+"月"; }var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4); console.log(ming.output()); console.log(gang.output());この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
フロントエンドでモジュール性を使用する必要があるのはなぜですか?
以上がJSデザインパターンのコンストラクタパターンの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。