ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript がファクトリ モード、コンストラクター モード、プロトタイプ モードを使用してオブジェクト インスタンスを作成する方法の詳細な説明

JavaScript がファクトリ モード、コンストラクター モード、プロトタイプ モードを使用してオブジェクト インスタンスを作成する方法の詳細な説明

伊谢尔伦
リリース: 2017-07-26 10:38:36
オリジナル
1564 人が閲覧しました

オブジェクト コンストラクターまたはオブジェクト リテラルの使用はオブジェクトの作成に非常に便利ですが、この方法には明らかな欠点があります。インターフェイスを使用して複数のオブジェクトを作成すると、冗長なコードが大量に生成されます。したがって、この問題を解決するために、人々は共通のオブジェクトに対して次のような方法を使用し始めました。

ファクトリ パターン

このパターンは、関数を使用してオブジェクトを作成する特定のプロセスを抽象化し、特定のインターフェイスを持つオブジェクトの詳細を作成します


 function cPerson(name,sex,age){
 var o = new Object();
 o.name = name;
 o.sex = sex;
 o.age = age;
 o.show = function(){
 console.log(this.name,this.age,this.sex);
 }
 return o;
}
 var p1 = cPerson('龙','男','100');
 p1.show();
 var p2 = cPerson('田','女','14');
 p2.show();
ログイン後にコピー

ファクトリ パターン テスト

ファクトリ アプローチの問題点: を使用するファクトリ パターン すべての情報を含むオブジェクトを作成でき、この関数は何度でも呼び出すことができます。類似したオブジェクトを複数作成する問題は解決しますが、オブジェクト認識 (つまり、オブジェクトの型を知る方法) の問題は解決しません

コンストラクター パターン


function CPerson(name,sex,age) {//注意这里 构造函数首字母大写
 this.name = name;
 this.sex = sex;
 this.age = age;
 this.show = function () {
 console.log(this.name, this.age, this.sex);
 }
}
var p1 = new CPerson('龙','男','100');
 p1.show();
var p2 = new CPerson('田','女','14');
 p2.show();
ログイン後にコピー

コンストラクター パターン テスト

以下のように、コンストラクターはファクトリー パターンとは若干異なることに注意してください

コンストラクターの最初の文字は大文字です

オブジェクトは明示的に作成されません

プロパティとメソッドはこのオブジェクトに割り当てられます

returnステートメント

そしてこのようにコンストラクターを呼び出すには、大まかにいくつかの手順を実行します

新しいオブジェクトを作成します

コンストラクターのスコープをこのオブジェクトに割り当てます(つまり、thisがこのオブジェクトを指すようにします)

コードを実行しますコンストラクター内 (つまり、新しいオブジェクトにプロパティとメソッドを追加するプロセス)

オブジェクトを返す

注: コンストラクターは実際には通常の関数とあまり変わりません。唯一の違いは呼び出し方法です。以下は、いくつかの異なる呼び出しメソッドを示しています


 // 调用方式1 new 方式
 var p1 = new CPerson('龙','男','100');
 p1.show();//龙 100 男
 // 调用方式2 普通函数调用
 CPerson('龙','男','100');
 window.show()//龙 100 男 注意属性和方法会被设置到window对象上
 // 调用方式3 在另一个对象的作用域中调用
 var obj = new Object();
 CPerson.call(obj,'龙','男','100');
 obj.show(); //龙 100 男 在obj的作用域
ログイン後にコピー

コンストラクターに関する問題: コンストラクターを使用する場合の主な問題は、p1 と p2 の両方に show メソッドがあることです。ただし、それは同じインスタンスではありません。関数。関数も js のオブジェクトであるためです。したがって、共有される表示方法は同等ではありません。

プロトタイプ パターン

すべての関数には、オブジェクトを指すポインターであるプロトタイプ属性があります。このオブジェクトの目的は、特定の型のすべてのインスタンスで共有できるプロパティとメソッドを含めることです。つまり、コンストラクターを呼び出して作成されたオブジェクトのプロトタイプ オブジェクトの利点は、オブジェクトのすべてのインスタンスがその属性を共有できることです。つまり、コンストラクターでインスタンス情報を定義する必要はありません

 function CPerson(){
}
CPerson.prototype.name='龙';
CPerson.prototype.sex='男';
CPerson.prototype.age=100;
CPerson.prototype.show=function(){
 console.log(this.name, this.age, this.sex);
}
var p1 = new CPerson();
 p1.show(); //龙 100 男
var p2 = new CPerson();
 p2.show();//龙 100 男
 console.log(p1.show == p2.show)//true
ログイン後にコピー

以上がJavaScript がファクトリ モード、コンストラクター モード、プロトタイプ モードを使用してオブジェクト インスタンスを作成する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート