JavaScrptオブジェクトの作成方法とコンストラクタのパターンコードを詳しく解説

JavaScript オブジェクト指向の知識は非常に広範囲にわたるため、深く理解するには時間がかかります

オブジェクトの作成:

1 オブジェクト指向を作成する

var obj = new Object(); 
obj.name = 'haha';
obj.showName = function(){ 
 alert(obj.name);
}
obj.showName();

欠点:複数のオブジェクトを作成する場合、繰り返されるコードが多すぎるため、カプセル化する必要があるため、ファクトリ メソッドが作成されます。

2 ファクトリメソッド

function CreatePerson(name){ 
 var obj = new Object(); //原料
 obj.name = name;   //加工
 obj.showName = function(){
  alert(this.name);
 } 
 return obj;//出厂
}
var p1 = CreatePerson('haha');
p1.showName();
var p2 = CreatePerson('hehe');
p2.showName();
//其实就是简单的封装函数，整个过程像工厂的流水线，所以叫工厂方式

欠点: 作成されたオブジェクトのタイプを識別できません。これらはすべてオブジェクトであるため、Date や Array などとは異なり区別がありません。そのため、コンストラクター パターンが登場しました。

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

function CreatePerson(name){ 
 this.name = name; 
 this.showName = function(){ 
  alert(this.name);
 } 
} 
var p1 =new CreatePerson('haha'); 
p1.showName();
var p2 = new CreatePerson('hehe'); 
p2.showName();

次の 2 つの点で変更します。

関数名の最初の文字は大文字になります

これは、実際にはコンストラクター自体が通常の関数と区別するためです。通常の Function ですが、特に構築の関数を実装するために使用するため、New を使用して呼び出す方法に応じて、どの関数もコンストラクターになることができます。

New キーワード呼び出し

New キーワードは関数を呼び出すときに使用されますが、New は具体的に何をするのでしょうか? Newを使用する場合と使用しない場合の違いは何ですか?次の例をもう一度見てみると

function CreatePerson(name){
 this.name = name;
 this.showName = function(){
  alert(this.name); 
 }; 
 console.log(this);
} 
new CreatePerson('haha'); //CreatePerson
CreatePerson('haha'); //window

、New を使用して関数を呼び出す場合、ポイントが異なることがわかります。実際、New は主に以下のことを行っていますが、以下に書いてあることはあくまで一般的な動作であり、内部のソースコードではありません。

function CreatePerson(name){ 
 var obj = {}; //声明一个空对象obj 
 obj._proto_= CreatePerson.prototype;
 //把这个对象的_proto_属性指向构造函数的原型对象,这样obj就可以调用CreatePerson原型对象下的所有方法 ，这里原型先知道结论，下面会讲。
 CreatePerson.apply(obj); //用apply方法让this指向obj对象
 this.name = name; //obj对象添加属性，方法
 this.showName = function(){ 
  alert(this.name);
  }; 
 return obj;//返回这个对象
}

関数構築パターンの問題:

alert(p1.showName==p2.showName);//false

欠点: これら 2 つのオブジェクトは、新しいたびに同じメソッドを共有しないことがわかります。それぞれ新しいメモリが作成されます。これら 2 つのオブジェクトには独自の土地がありますが、同じ機能があり、まだ共有されていません。これは確かに私たちが望んでいることではありません。次のメソッドは、プロトタイプ + 構築モードです

4 プロトタイプ + 構築モード

プロトタイプ: 各関数にはプロトタイプ属性があります。これは、プロトタイプ オブジェクトとも呼ばれるオブジェクトです。メソッドと属性を配置できます。 (ただし、プロトタイプ オブジェクトには、私たちが作成した属性とメソッドだけでなく、以下で紹介する他の属性も含まれます)、この関数を通じて作成されたインスタンス オブジェクトは、このプロトタイプ オブジェクトの属性とメソッドを共有できます。したがって、共有したいものを関数のプロトタイプに置くだけでよく、共有したくないものはコンストラクターを通じて作成できます。
クリ（プロトタイプ + 構築）を見てください

function CreatePerson(name){ 
 this.name = name;
}
CreatePerson.prototype.showName = function(){ 
 alert(this.name);
}
var p1 =new CreatePerson('haha');
p1.showName();
var p2 = new CreatePerson('hehe');
p2.showName();
alert(p1.showName==p2.showName);//true

テストは true であることがわかります。これは、それらがメモリを共有していることを意味します。つまり、p1 の showName を変更すると、p2 の showName にも影響します。

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