js_javascript スキルでオブジェクトを作成するいくつかの方法の例

JavaScript では、文字列、配列、数値、関数など、すべてがオブジェクトです。

JS にはクラスの概念はありませんが、JS の文法機能を使用してクラスの概念でオブジェクトを作成できます。

元のメソッド

コードをコピー コードは次のとおりです:

< ;script type ="text/javascript">

var obj = new Object();
obj.name = "Koji" //オブジェクトに属性を追加します
obj.age = 21;
obj.showName = function(){ //オブジェクトにメソッドを追加します
alert(this.name)
}
obj.showAge = function(){
alert(this) .age);

obj.showName(); //コウジ
🎜>
上記のメソッドは new キーワードによってオブジェクトを生成し、動的言語としての JS の特性に応じてプロパティとメソッドを追加して、

オブジェクトを構築します。これはメソッドを呼び出すオブジェクトです。

このアプローチの問題は、オブジェクトを複数回作成する必要がある場合、コードを複数回繰り返す必要があり、コードの再利用に役立たないことです。

ファクトリ メソッド




コードをコピー

コードは次のとおりです: < ;script type ="text/javascript"> function createObj(){

var obj = new Object(); //オブジェクトを作成

obj.name = "Koji" ;
obj.age = 21;
obj.showName = function(){
alert(this.name);
}
obj.showAge = function(){
alert (this.age);

return object
}

var obj1 = createObj();

obj1.showName(); //Koji
obj2.showAge(); //21


このアプローチは改善しますコード 再利用率を向上させるために、ファクトリ メソッドを変更してパラメータ値を渡すこともできます。




コードをコピー

コードは次のとおりです:

alert(this.name);

obj.showAge = function() {
alert (this.age);
}

return obj; //オブジェクトを返す
}

var obj1 = createObj("Koji", 22);
var obj2 = createObj("Luo", 21);

obj1.showName(); //コウジ
obj1.showAge() //22
obj2.showName(); ; //Luo
obj2.showAge(); //21




上記の方法はコードの再利用率を向上させますが、それは異なります。オブジェクト指向クラスの概念には大きな欠陥があります。 face

オブジェクトは、オブジェクトのプロパティがプライベートである一方、オブジェクトのメソッドは共有されることを強調しています。上記のファクトリ メソッドがオブジェクトを作成するときは、

オブジェクトごとに独自のプライベート メソッドを作成する必要があります。同時に、各オブジェクトに対して論理的に同一のメソッドを作成するとメモリが無駄に消費されます。改善点は次のとおりです




コードをコピー

コードは次のとおりです:


function showName(){ //この関数はオブジェクトでもあります

alert(this.name)
}

function showAge( ){
alert(this .age);

var obj1 = createObj("Koji", 22);
var obj2 ("Luo", 21); 🎜>
obj1.showAge(); //コウジ
obj2.showAge(); //ルオ
obj2.showAge();




上記は、2 つの関数オブジェクトを定義することで、関数オブジェクトを保持するさまざまなオブジェクトのプライベート問題を解決します。これで、すべてのオブジェクト メソッド

が上記 2 つの関数への参照を保持します。しかしこの場合、オブジェクトの機能は独立し、オブジェクトとは無関係になります。これは、特定のメソッドが特定のクラスに属するという

オブジェクト指向の考え方と矛盾します。

コンストラクター メソッド




コードをコピー


コードは次のとおりです。

コンストラクターメソッドはファクトリメソッドと同じで、オブジェクトごとに専用の関数オブジェクトを作成します。もちろん、これらの関数

オブジェクトはコンストラクターの外部で定義することもできるため、オブジェクトとメソッドは互いに独立しています。

プロトタイプ メソッド: このメソッドはオブジェクトのプロトタイプ属性を利用します




コードをコピー

コードは次のとおりです。 script type="text/javascript"> function Person(){} //空のコンストラクタを定義し、パラメータを渡すことはできません

//置換all 属性メソッドはすべてプロトタイプ属性

person.prototype.name = "Koji"; // 属性


を追加します。 prototype.showName = function(){ //メソッドを追加します
alert(this.name);
}

person.prototype.showAge = function(){
alert(this.age) );
}

var obj1 = new Person() // 人物オブジェクトを生成します
var obj1.showName(); //コウジ
obj1.showAge(); //22
obj2.showAge(); //22

🎜>

Person オブジェクトが生成されると、プロトタイプの属性が新しいオブジェクトに割り当てられます。次に、プロパティとメソッドが共有されます。

このメソッドの最初の問題は、コンストラクターがパラメーターを渡すことができず、新しく生成された各オブジェクトにはデフォルト値があることです。次に、メソッドの共有には問題ありませんが、属性が状態を変更できるオブジェクトである場合、属性の共有には問題があります。




コードをコピー

コードは次のとおりです:

パーソン.prototype. showArray = function(){
alert(this.array);
}

var obj1 = new person() // Person オブジェクトを生成します
var obj2 = new Person() ;

obj1.array.push("Kyo") //obj1 の配列属性に要素を追加

obj1.showArray(); //Koji,Luo,Kyo
obj2 .showArray(); //Koji,Luo,Kyo




上記のコードが obj1 から obj1 までの属性配列に要素を追加すると、 obj2 の配列属性要素も

の影響を受けます。その理由は、obj1 オブジェクトと obj2 オブジェクトの配列属性が同じ Array オブジェクトを参照しているためです。次に、この Array

オブジェクトを変更します。 1 つは Array オブジェクトを参照します。プロパティは当然影響を受けます。

コンストラクターとプロトタイプの混合アプローチ

コンストラクターを使用してオブジェクトのプロパティを定義し、プロトタイプを使用してオブジェクトのメソッドを定義します。これにより、メソッドは共有されながら、プロパティ

プライベートを実現できます。

コードをコピー


コードは次のとおりです:

属性がプライベートになった後は、それぞれの属性を変更しても他のオブジェクトには影響しません。同時に、メソッドはさまざまなオブジェクトによって共有されます。意味的には、

これはオブジェクト指向プログラミングの要件を満たしています。

動的プロトタイプ メソッド

コードをコピー コードは次のとおりです: