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

JavaScript がコンストラクター パターンを使用してオブジェクト インスタンスを作成する方法の詳細な説明

伊谢尔伦
リリース: 2017-07-27 10:32:15
オリジナル
3311 人が閲覧しました

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

Object や Array などのコンストラクターは、実行時に実行環境に自動的に表示されます。さらに、カスタム コンストラクターを作成して、カスタム オブジェクト タイプのプロパティとメソッドを定義できます。


function Person(name, age, job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function(){
 alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
ログイン後にコピー

この例では、 person() 関数が createperson() 関数を置き換えます。 createPerson() と同じ部分に加えて、Person() のコードには次のような違いがあることに気付きました。

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

2. プロパティとメソッドは直接割り当てられます。このオブジェクトは与えられています。

3. return ステートメントはありません。

Person の新しいインスタンスを作成するには、new 演算子を使用する必要があります。この方法でコンストラクターを呼び出すには、実際には次の 4 つの手順を実行します:

(1) 新しいオブジェクトを作成します。
(2) コンストラクターのスコープを新しいオブジェクトに割り当てます (つまり、この新しいオブジェクトを指します) ;
( 3) コンストラクター内のコードを実行します (この新しいオブジェクトにプロパティを追加します);
(4) 新しいオブジェクトを返します。

前の例の最後で、person1 と person2 はそれぞれ person の異なるインスタンスを保持しています。以下に示すように、どちらのオブジェクトにも person を指すコンストラクター属性があります。

alert(person1.constructor == Person); //true
alert(person2.constructor == Person); //true
ログイン後にコピー

オブジェクトのコンストラクター属性は、本来はオブジェクトの種類を識別するために使用されます。ただし、オブジェクト タイプの検出に関しては、instanceof 演算子の方が信頼性が高くなります。この例で作成するすべてのオブジェクトは、Object のインスタンスと Person のインスタンスの両方であり、instanceof 演算子を通じて検証できます。

alert(person1 instanceof Object); //true
alert(person1 instanceof Person); //true
alert(person2 instanceof Object); //true
alert(person2 instanceof Person); //true
ログイン後にコピー

カスタム コンストラクターを作成すると、将来的にはそのインスタンスを特定の型として識別できるようになり、この点でコンストラクター パターンがファクトリ パターンよりも優れたパフォーマンスを発揮します。この例では、すべてのオブジェクトが Object から継承しているため、person1 と person2 は両方とも Object のインスタンスです。

コンストラクターの問題

コンストラクター パターンは使いやすいですが、欠点がないわけではありません。コンストラクターを使用する場合の主な問題は、各インスタンスで各メソッドを再作成する必要があることです。

ECMAScript の関数はオブジェクトであるため、関数が定義されるたびにオブジェクトがインスタンス化されます。このときのコンストラクターも論理的には次のように定義できます。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = new Function("alert(this.name)"); // 与声明函数在逻辑上是等价的
}
ログイン後にコピー

この観点からコンストラクターを見ると、(name 属性を表示するために) 各 Person インスタンスに異なる Function インスタンスが含まれているという本質が理解しやすくなります。明確にするために、この方法で関数を作成すると、スコープ チェーンと識別子の解決が異なりますが、Function の新しいインスタンスを作成するメカニズムは同じです。したがって、次のコードが証明できるように、異なるインスタンス上の同じ名前の関数は等価ではありません。

alert(person1.sayName == person2.sayName); //false
ログイン後にコピー

ただし、実際には、同じタスクを完了するために 2 つの Function インスタンスを作成する必要はありません。また、このオブジェクトを使用すると、コードを実行する前に関数を特定のオブジェクトにバインドする必要もありません。したがって、次のように関数定義をコンストラクターの外に移動することで、この問題を解決できます。


りー

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

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