JavaScriptで関数を使ってクラスインスタンスを定義する使い方を詳しく解説

まず例で説明します:

function myClass() 
{ 
var id = 1; 
var name = "johnson"; 
//properties 
this.ID = id; 
this.Name = name; 
//method 
this.showMessage = function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
} 
} 
var obj1 = new myClass(); 
var obj2 = new myClass();

関数の定義は実際にはクラスのコンストラクターに相当し、最後の 2 つの文はこのクラスのインスタンスを作成するものです。まず最初の文を分析しましょう: var obj1 = new myClass(); new を使用してクラスのインスタンスを作成する場合、インタープリターは最初に空のオブジェクトを作成します。次に、この myClass 関数を実行し、このポインターがこのクラスのインスタンスを指すようにします。 this.ID = id; と this.Name = name; および this.showMessage = function(){...} が発生すると、これら 2 つのプロパティと this メソッドが作成され、変数 id と name は次のようになります。値レベルの関数は、これら 2 つのプロパティとこの関数オブジェクト (shwoMessage) に割り当てられます。このプロセスは、C# のコンストラクターと同様に、オブジェクトの初期化に相当します。最後に new はこのオブジェクトを返します。 2 番目の文を見てください: var obj2 = new myClass(); 実行プロセスは前の文と同じです。つまり、空のオブジェクトを作成し、myClass 関数を実行して 2 つのプロパティと 1 つのメソッドを定義します。
上記の分析からわかるように、クラスを実装する上記の方法は、関数の定義でクラスの属性メソッドを定義することです。デメリットもあります。上に示したように、このクラスのインスタンスを 2 つ以上作成する必要がある場合、これらのプロパティは複数回作成されます。
では、この状況を回避するにはどうすればよいでしょうか?プロトタイプはその名前のようにプロトタイプです。各関数にはサブオブジェクト プロトタイプがあり、実際にはこの関数オブジェクトのメンバーのコレクションを表します。ここでは、プロトタイプが実際にはクラス A であると言えます。メンバーの集合体。プロトタイプによって定義されたプロパティとメソッドは、関数のコンストラクターが実行される前に実行されるため、オブジェクトが新しくなる前に、プロトタイプのメンバーが実際に実行されます。まず例を見てみましょう。

function myClass() 
{ 
//构造函数 
} 
myClass.prototype = 
{ 
ID: 1, 
Name: "johnson", 
showMessage: function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
} 
} 
var obj1 = new myClass(); 
var obj2 = new myClass();

クラスの構造は前の例と同じですが、ここではプロトタイプを使用して実装されています。まず最後の 2 つの文を見てみましょう。前述したように、プロトタイプは関数コンストラクターの前、つまり var obj1 = new myClass(); が実行される前に、このクラスにはすでに ID、Name 属性、および showMessage メソッドが含まれています。エグゼキュータが文を記述するときの実行プロセスは次のとおりです。前の例との比較に注意してください。まず、空のオブジェクトを作成し、this ポインタをこのオブジェクトにポイントします。次に、関数のプロトタイプ オブジェクトのすべてのメンバーをこのオブジェクトに割り当てます (これらのメンバーは再度作成されないことに注意してください)。次に関数本体を実行します。最後に new はこのオブジェクトを返します。次の文を実行するとき: この処理も実行され、これらのメンバーが繰り返し作成されることはありません。
上記のコードは単なる例です。実際のプロジェクトでは、クラス内に多数のメンバーが存在し、多数のインスタンスを作成する必要がある場合があります。このプロトタイプがその優位性を示すでしょう。さらに、上記のコードは中括弧構文を使用してプロトタイプのメンバーを定義しているため、コードがより明確になります。これは推奨されるクラス設計パターンです。もちろん、多くのプロジェクトでは、より最適化された JavaScript プログラミング モデルが見つかる可能性があり、今後も新しいモデルが導入されることを期待しています。 。
上記のように、プロトタイプで定義されたメンバーはコンストラクターの前に存在します。 var obj1 = new を実行すると、コンストラクターが空であることがわかります。 myClass(); を実行すると、正しい属性値を示すポップアップ ダイアログ ボックスが表示されます。
次のコード:

function subClass(){ } 
subClass.prototype = 
{ 
Name: "sub" 
} 
function myClass() 
{ 
//构造函数 
} 
myClass.prototype = 
{ 
ID: 1, 
Name: "johnson", 
SubObj: new subClass(), 
showMessage: function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name + "SubObj.Name:" + this.SubObj.Name); 
} 
} 
var obj1 = new myClass(); 
obj1.SubObj.Name = "XXX"; 
obj1.showMessage(); 
var obj2 = new myClass(); 
obj2.showMessage();

ここでは myClass で参照型が定義されており、その型はカスタマイズしたサブクラス クラスです。 このサブクラスには Name 属性があります。プロトタイプ オブジェクトは共有されているため、上記の分析によれば、var obj1 = new myClass(); を実行すると、myClass のプロトタイプのメンバーがこの obj1 インスタンスにコピーされます。ただし、ここでの SubObj は参照型です。 var obj2 = new myClass(); が実行されると、プロトタイプ内の ID および Name メンバーは obj2 にコピーされますが、SubObj 属性はコピーされず、プロトタイプ内で参照されます。 .SubObj なので、前の文で obj1.Subobj.Name の値が変更されているため、new を使用して obj2 インスタンスを生成すると、変更された値が参照されます。
そのため、プロトタイプを使用してクラスを定義する場合でも、コンストラクターでプロパティを定義し、コンストラクターのプロトタイプでメソッドを定義する必要があります。以下の通り:

rree

以上がJavaScriptで関数を使ってクラスインスタンスを定義する使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。