JavaScript ファクトリ パターン、プロトタイプ パターン、コンストラクタ パターン

1. パターンとは何ですか? パターンは再利用可能な解決策ですが、アンチパターンは特定の問題に対する不適切な解決策です。

js アンチパターンの一般的な例

① 関数の代わりに文字列を setTimeout と setInterval に渡すと、eval() の内部使用がトリガーされます。
②グローバルコンテキストで大量の変数を定義するとグローバル名前空間が汚染される
③オブジェクトクラスのプロトタイプを変更する
④インライン形式でjsを使用すると、HTMLファイルに埋め込まれたjsコードを外部の単体テストツールに含めることができません。

⑤document.write を悪用します。ページが読み込まれた後に document.write が実行されると、現在のページが書き換えられます。代わりに document.creatElement を使用できる場合は、document.write を使用しないようにしてください。

2. デザインパターンの分類

(1).ファクトリパターン(単純なものと複雑なもの)

簡単に言うと、カプセル化されたコードです。その役割については、オブジェクトを使用することが分かりやすいです。いくつかのオブジェクトをカプセル化し、多くのスペースを占めるいくつかの反復コードをカプセル化するための指向性メソッド。実装方法は非常に簡単で、関数内でオブジェクトを作成し、そのオブジェクトにプロパティやメソッドを代入し、そのオブジェクトを返すだけです。この方法 は、インスタンス化されたオブジェクトの多数の重複の問題 を解決するためのものです。

	function creatper(name,age){  
		var per=new Object(); //原料
		//加工
		per.name=name;
		per.age=age;  
		per.sayHi=function(){
		  	console.log(per.name+'已经有'+per.age+"岁");  
		}
		return per; //出厂
	}
	var test1=creatper('lili',22);
	var test2 =creatper('mike',25);//第二个实例
	test1.sayHi();
	test2.sayHi();
	console.log(test1.name);

ファクトリモードを使用すると、この関数ごとに繰り返し呼び出して、さまざまな属性値を持つオブジェクトを生成できることがわかります。これはまさに工場のように、大量生産され、原材料、加工、配送がすべて非常に明確です。 。ただし、日付や配列などとは異なり、オブジェクトはすべてオブジェクトであるため、ファクトリ パターンではオブジェクトの種類を識別できないことがわかります。

ファクトリーパターンをいつ使用するか?
ファクトリ パターンは主に次のシナリオで使用されます:
① オブジェクトまたはコンポーネントに高度な複雑性が含まれる場合
② 異なる環境に応じてオブジェクトの異なるインスタンスを簡単に生成する必要がある場合

③ 共有する多数の小さなオブジェクトを扱う場合同じプロパティまたはコンポーネント時間

(2)。Constructor (コンストラクター) パターン

Constructor (コンストラクター メソッド) を ECMAScript で使用して、特定のオブジェクトを作成できます。 このモードは、上記のファクトリ モードがオブジェクト インスタンスを識別できないという問題を解決できます。

	function Student(name,age,classa){//构造函数模式
        this.name = name;
        this.age = age;
        this.classa = classa;
        this.run = function () {
            console.log(this.name+ this.age+ "岁上"+this.classa +"！");
        }
    }
    var Benz = new Student('Lili',22,'初三');
    var BMW = new Student("Mike",25,"初一");
    console.log(Benz instanceof Student); //很清晰的识别他从属于Student
    Benz.run();
    BMW.run();

このコードからは、ファクトリー モードでの異なる関数名を除いて、a. コンストラクター メソッドが明示的にオブジェクト (new Object()) を作成しないこと、b. プロパティとメソッドを直接割り当てることがわかります。このオブジェクトには return ステートメントがありません。オブジェクトを認識する能力 (これは、コンストラクター パターンがファクトリー パターンよりも優れている点です) 。注: コンストラクター メソッドの仕様: 1. 関数名とインスタンス化コンストラクター名は同じで大文字です。 2. コンストラクターを通じてオブジェクトを作成するには、new 演算子を使用する必要があります。

オブジェクトはコンストラクターを通じて作成できるので、このオブジェクトはどこから来て、どこで new Object() が実行されるのでしょうか?実行プロセスは次のとおりです。
1. コンストラクターが使用され、 newconstructor() がバックグラウンドで実行されます。
2. コンストラクターのスコープを新しいオブジェクトに与えます。 Object() 作成されたオブジェクト)、関数本体の this は new Object() によって作成されたオブジェクトを表します。
3. コンストラクターでコードを実行します。

4. 新しいオブジェクトを返します (バックグラウンドで直接返します)。

(3). プロトタイプ パターン

js は、作成されたすべての関数がプロトタイプ属性を持つことを規定しており、この属性はオブジェクトを指すポインターであり、このオブジェクトの目的は特定の型のすべてのインスタンスによって共有されることです。プロパティとメソッドは、プロトタイプ オブジェクトを使用して、すべてのインスタンス オブジェクトにこれらのプロパティとメソッドを含めることができます。

	function Per(){}
	Per.prototype.name='小米';
	Per.prototype.age=22;
	Per.prototype.course=['php','javascript','java','C#'];
	Per.prototype.say=function(){
		console.log(this.name+"有"+this.age+"岁，学习了"+this.course+"等课程。");
	}
	var per1=new Per();
	var per2=new Per();
	per1.name='小林';
	per1.course.push('Html5');
	per1.say();
	per2.say();
	per2.course.pop();

プロトタイプパターンの欠点については、初期化パラメータを渡すコンストラクターを省略していることも明らかだと思いますが、デフォルトではすべてのインスタンスが同じ属性値を取得します。後で変更することはできますが、これは最大の問題ではありません。共有の性質により、一方のインスタンスが参照を変更し、もう一方のインスタンスも変更されます。属性を変更します。したがって、プロトタイプ モードは通常、単独で使用されません。

(4). プロトタイプを持つコンストラクター = プロトタイプ パターン + コンストラクター パターン

	function Per(name,age,course){
		this.name=name;
		this.age=age;
		this.course=course;
	}
	Per.prototype.say=function(){
		console.log(this.name+"有"+this.age+"岁，学习了"+this.course+"等课程。");
	}
	var per1=new Per('Make',22,['C#','java','PHP','Javascript']);
	var per2=new Per('小高',21,['oracle','mysql','nodejs','html5']);
	per1.say();//Make有22岁，学习了C#,java,PHP,Javascript等课程。
	per2.say();//小高有21岁，学习了oracle,mysql,nodejs,html5等课程。
	per1.course.pop();
	per1.say();//Make有22岁，学习了C#,java,PHP等课程。
	per2.say();//小高有21岁，学习了oracle,mysql,nodejs,html5等课程。

上記の分析: コンストラクターはインスタンスの属性を定義するために使用され、プロトタイプ パターンはメソッドと一部の共有属性を定義するために使用されます。各インスタンスは独自の属性を持ちますが、同時にメソッドを共有し、メモリを最大限に節約します。さらに、このモードは初期パラメータの受け渡しもサポートしています。最も広く使用されています。

関連する推奨事項:

JSデザインパターンのプロトタイプモードの詳細説明

JSデザインパターンのコマンドパターンの詳細説明

JSデザインパターンのプロキシモードの詳細説明

以上がJavaScript ファクトリ パターン、プロトタイプ パターン、コンストラクタ パターンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。