AJAX の基礎: JavaScript でのクラスの実装 JavaScript では、function キーワードを使用して「クラス」を定義し、そのクラスにメンバーを追加する方法を定義できます。関数内でこのポインターを介して参照される変数またはメソッドは、クラスのメンバーになります。次に例を示します。
コード スニペットは次のとおりです。
function class1(){
var s="abc";
this.p1=s;
this.method1=function(){
alert("これはテストメソッドです");
}
}
var obj1=新しいクラス1();
new class1() を通じてオブジェクト obj1 を取得すると、オブジェクト obj1 は属性 p1 とメソッド method1 を自動的に取得します。
JavaScript では、関数の定義自体がクラスのコンストラクターになります。先ほど紹介したオブジェクトのプロパティと new 演算子の使用法を組み合わせて、new を使用してオブジェクトを作成するプロセスを説明します。
(1) インタプリタが new 演算子に遭遇すると、空のオブジェクトを作成します。
(2) class1 関数の実行を開始し、その中の this ポインタを新しく作成されたオブジェクトに指します。
(3) オブジェクトが存在しないため、属性に値を割り当てる場合、インタプリタはオブジェクトの属性を作成します。たとえば、class1 で this.p1=s ステートメントが実行されると、属性 p1 が追加され、変数 s の値は次のようになります。
(4) 関数が実行
されると、new 演算子は初期化されたオブジェクトを返します。
このプロセス全体を通じて、基本的なオブジェクト指向メカニズムが JavaScript に実装されます。 JavaScript では、関数の定義は実際にはオブジェクトのコンストラクターを実装することであり、オブジェクトは関数を通じて完成されることがわかります。この方法の欠点は次のとおりです。
· すべての初期化ステートメントとメンバー定義をまとめると、コード ロジックが十分に明確にならず、複雑な関数を実装するのが困難になります。
·クラスのインスタンスが作成されるたびに、コンストラクターを 1 回実行する必要があります。コンストラクターで定義されたプロパティとメソッドは常に繰り返し作成されます。例:
以下はコードの一部です:
this.method1=function(){
alert("これはテストメソッドです");
ここ
で、method1 が class1 のインスタンスを作成するたびに、インスタンスが 1 回作成されるため、メモリが無駄に消費されます。次のセクションでは、別のクラス定義メカニズムであるプロトタイプ オブジェクトを紹介します。これは、コンストラクターでクラス メンバーを定義することによって生じる欠点を解決できます。
プロトタイプ オブジェクトを使用したクラス メンバーの定義
前のセクションでは、クラスの実装メカニズムとコンストラクターの実装を紹介しました。次に、クラスにメンバーを追加する別のメカニズムであるプロトタイプ オブジェクトを紹介します。関数を新規作成すると、オブジェクトのメンバーが作成されたオブジェクトに自動的に割り当てられます。次に例を示します。
コード スニペットは次のとおりです。
<script language="JavaScript" type="text/javascript">
<!--
// 属性 prop を 1 つだけ持つクラス関数 class1(){ を定義します
this.prop=1;
}
// 関数のプロトタイプ属性を使用して、クラスの新しいメンバーを定義します class1.prototype.showProp=function(){
アラート(this.prop);
}
//class1 のインスタンスを作成します var obj1=new class1();
// プロトタイプ プロトタイプ オブジェクト obj1.showProp() を通じて定義された showProp メソッドを呼び出します。
//-->
</script>
プロトタイプは、プロトタイプ オブジェクトに対してメソッドやプロパティを追加、変更、削除できる JavaScript オブジェクトです。これにより、クラスにメンバー定義が追加されます。
関数のプロトタイプ オブジェクトを理解したところで、new の実行プロセスを見てみましょう。
(1) 新しいオブジェクトを作成し、このポインターがそれを指すようにします。
(2) 関数のプロトタイプ オブジェクトのすべてのメンバーをこの新しいオブジェクトに割り当てます。
(4) ) オブジェクトを返します
。
(1)で作成しました。
前のセクションで紹介した new の実行プロセスと比較して、prototype を使用してオブジェクトを初期化する追加のプロセスがあります。これは、対応するクラスのインスタンスのプロトタイプであるプロトタイプの文字通りの意味とも一致します。この初期化プロセスは関数本体 (コンストラクター) が実行される前に発生するため、プロトタイプで定義されたプロパティとメソッドを関数本体内で呼び出すことができます。
次に例を示します。
<script language="JavaScript" type="text/javascript">
<!--
// 属性 prop を 1 つだけ持つクラスを定義する
関数クラス1(){
this.prop=1;
this.showProp();
}
//関数のプロトタイプ属性を使用して、クラスの新しいメンバーを定義します
class1.prototype.showProp=function(){
アラート(this.prop);
}
//class1のインスタンスを作成する
var obj1=新しいクラス1();
//-->
</script>
前のコードと比較すると、ここでは、prototype で定義されたメソッド showProp が class1 内で呼び出されるため、オブジェクトの構築プロセス中にダイアログ ボックスが表示され、prop 属性の値が 1 であることが示されます。
プロトタイプ オブジェクトの定義は、クラス インスタンスを作成するステートメントの前になければならないことに注意してください。そうしないと機能しません。たとえば、
次のコード スニペットです。
<script language="JavaScript" type="text/javascript">
<!--
// 属性 prop を 1 つだけ持つクラスを定義する
関数クラス1(){
this.prop=1;
this.showProp();
}
//class1のインスタンスを作成する
var obj1=新しいクラス1();
//インスタンスを作成するステートメントの後に、関数のプロトタイプ属性を使用してクラスの新しいメンバーを定義します。これは、後で作成されるオブジェクトに対してのみ有効です。
class1.prototype.showProp=function(){
アラート(this.prop);
}
//-->
、
クラスをインスタンス化するステートメントの後にメソッドが定義されているため、表示オブジェクトに showProp メソッドがないことを示すランタイム エラーを生成します。
さらに、プロトタイプ オブジェクトは、デザイン クラスのメンバー専用であることがわかります。さらに、プロトタイプには、コンストラクターへの参照を表す重要な属性もあります
。コードのスニペットは次のとおりです。
関数クラス1(){
アラート(1);
}
class1.prototype.constructor(); //クラスのコンストラクターを呼び出します。
このコードを実行すると、ダイアログ ボックスに「1」というテキストが表示されます。これは、プロトタイプがクラスの定義と密接に関連していることを示しています。実際には: class1.prototype.constructor===class1。
JavaScript クラスの設計パターン。
クラスを定義する方法とクラスのインスタンスを初期化する方法をすでに紹介しました。クラスは、関数によって定義された関数本体にメンバーを追加できます。また、プロトタイプを使用してクラスのメンバーを定義することもできます。プログラミングコードがわかりにくいようです。クラスを明確に定義するにはどうすればよいでしょうか?クラスの実装パターンを以下に示します。
JavaScript では、オブジェクトの柔軟な性質により、コンストラクター内のクラスにメンバーを追加することもできます。これにより、柔軟性が高まるだけでなく、コードの複雑さも増します。コードの可読性と開発効率を向上させるために、この方法でメンバーを定義し、代わりにプロトタイプ オブジェクトを使用することができます。この方法では、関数の定義がクラスのコンストラクターとなり、実装と一致します。従来のクラスの場合: クラス名とコンストラクター名は同じです。例:
コード スニペットは次のとおりです。
関数クラス1(){
//コンストラクタ
}
//メンバー定義
class1.prototype.someProperty="サンプル";
class1.prototype.someMethod=function(){
//メソッド実装コード
}
上記のコードにより、クラスの定義はかなり明確になりましたが、プロパティやメソッドを定義するたびに class1.prototype を使用する必要があり、コード サイズが大きくなるだけでなく、可読性も十分ではありません。さらに改善するには、型なしオブジェクトのコンストラクターを使用してプロトタイプ オブジェクトを指定し、クラスのメンバー定義を実装できます。
以下はコード スニペットです。
//クラスを定義します class1
関数クラス1(){
//コンストラクタ
}
//プロトタイプオブジェクトを指定してクラスのメンバー定義を実現する
class1.プロトタイプ={
someProperty:"サンプル"、someMethod:function(){
//メソッドコード
}、
...//その他のプロパティとメソッド。
}
上記のコードは、非常に明確な方法で class1 を定義しています。コンストラクターはクラス名を使用して直接実装され、すべてのプロパティとメソッドはリストで実装され、同時に初期化できます。定義された属性の値。これは、従来のオブジェクト指向言語のクラスの実装にも似ています。コンストラクターとクラスのメンバーの定義が 2 つの部分に分かれているだけで、これは JavaScript でクラスを定義するための定型とみなすことができ、使用する際に理解しやすくなります。
注: クラスのメンバー間の参照は、このポインターを通じて行う必要があります。たとえば、上記の例の someMethod メソッドでは、属性 someProperty を使用する場合は、this.someProperty の形式を渡す必要があります。プロパティとメソッドは独立しており、このポインターを介してオブジェクトに接続されます。