JavaScriptのオブジェクト定義方法がシンプルで学びやすい_jsオブジェクト指向

ファクトリ パターン:
初級開発者は次のようなオブジェクトを定義できます:
var obj = new Object();
obj.showName=function (){alert( this .name);}
ここでの問題は、obj オブジェクトを複数の場所で使用したい場合、プログラム内で同様のコードを何度も記述する必要がある可能性があるため、ファクトリ メソッド
function createObj()
{
var obj = new Object();
obj.name="hero";
obj.showName=function (){alert(this.name);}
return obj;
}
var obj1 = createObj();
var obj2 = createObj();
および別のメソッド コンストラクター メソッド
function obj (name)
{
this.name =name;
this.showName= function (){alert(this.name);}
}
新しいコードの重複を避けるために、さらにコードをカプセル化することもできます。改善点は、デフォルトの固定値を obj に割り当てる代わりに、createObj にいくつかのパラメータを渡すことです。
function createObj(name)
{
var obj = new Object();
obj.showName=function (){alert(this.name);}
return obj;
}
var obj1 = createObj("hero"); j2=createObj("dby");
しかし、createObj 関数を呼び出すたびに、新しい関数 showName が作成されるという問題があります。これは、各オブジェクトが独自のバージョンの showName を持っていることを意味します。この問題を回避するには、
function showName()
{
alert(this.name)
}
function createObj(name)
{
var obj = new Object();
obj.showName=showName;
return obj;
}
これで関数を繰り返し作成できます。
プロトタイプ メソッド:
主にオブジェクトのプロトタイプ属性を使用します。
obj.prototype.name="hero"; obj.prototype.showName=function()
{
alert(this.name);
}
先ほどのファクトリーよりも完璧に見えますが、この関数には問題があります。コンストラクターがなく、属性はプロトタイプによって指定されます。これは、実際のアプリケーションでは、特にセキュリティ上のリスクがある場合には非常に困難です。たとえば、次のような段落を追加します。
obj.prototype.nameArray("hero","dby");
Then
obj1 = new obj(); >obj2 = new obj();
obj1.nameArray.push("lxw" );
2 つのオブジェクトの nameArray が同じ参照を指しているため、この属性は obj2 の nameArray にも表示されます。
したがって、このメソッドは理想的ではありません。
改善の必要があります
コンストラクターを結合し、コンストラクターでプロパティを定義し、プロトタイプ定義メソッドを使用します。
たとえば、
fuction obj(name)
{
this.name = name
this.nameArray = new Array(" hero","dby");
}
obj.prototype.showName = function(){alert(this.name) )}
すべての非関数プロパティはコンストラクターで作成され、関数プロパティはプロトタイプ モードで作成を使用して作成されます。obj1 の nameArray 値を変更しても、obj2 オブジェクトの nameArray 値には影響せず、showName は 1 つだけです
基本的には完璧ですが、興味があれば、自分で変更して遊んでみてください。
ここにシングルトンを追加して遊んでいます。 :
関数 obj (名前)
{
this.name = 名前;
this.nameArray=new Array("hero","dby");
if(typeof obj._initialized) =='未定義')
{
obj.prototype.showName=function(){alert(this.name);}
obj._initialized="true";
}
実際には、これはオブジェクトを構築するときに、属性が定義されているかどうかを最初に判断し、属性が定義されていない場合は、プロトタイプ メソッドを使用してオブジェクトの定義を続けるだけです。定義されている場合、関数は再度定義されません。
これでほぼ完璧になります。
これは私の個人的な理解です。不完全な点がある場合は、QQ に連絡して修正してください。
これは完全な例です:
function Rectangle(name,color,width,heigth){
this.name=name;
this.width= width; ;
this.heigth=heigth;
}
Rectangle.prototype.area=function(){
return this.width*this.heigth
}
Rectangle.prototype. =function(){
document.write(this.name " " this.color " " this.width " " this.heigth "
");
document.write(this.area() ); ;
}
var obj1= new Rectangle("Rectangle","re​​d",15,20);