ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript オブジェクト指向プログラミング (2) class_js オブジェクト指向を定義する

JavaScript オブジェクト指向プログラミング (2) class_js オブジェクト指向を定義する

WBOY
リリース: 2016-05-16 18:27:11
オリジナル
1080 人が閲覧しました

この記事は、前回の記事 JavaScript オブジェクト指向プログラミング (1) 基礎 の続きです。
前の記事で述べたように、JavaScript にはクラスの概念がなく、クラス定義を実装するには関数を使用する必要があります。まず例で説明します。

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

function myClass ()
{
var id = 1;
var name = "johnson";
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 つ以上作成する必要がある場合、これらのプロパティは複数回作成されます。
では、この状況を回避するにはどうすればよいでしょうか?プロトタイプの使用については、前の記事でも触れました。プロトタイプは、その名前のようにプロトタイプです。各関数には、実際にはこの関数オブジェクトのメンバーのコレクションを表すサブオブジェクト プロトタイプがあります。ここでは、プロトタイプは実際にはクラスであると言えます。メンバーの。プロトタイプによって定義されたプロパティとメソッドは、関数のコンストラクターが実行される前に実行されるため、オブジェクトが新規になる前に、プロトタイプのメンバーが実際に実行されます。まず例を見てみましょう:


コードをコピーします コードは次のとおりです:
関数myClass()
{
//Constructor
}
myClass.prototype =
{
ID: 1,
名前: "johnson",
showMessage: function ()
{
alert("ID: " this.ID ", 名前: " this.Name)
}
}
var obj1 = new myClass(); var obj2 = new myClass ();


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



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

function subClass(){ }
subClass.prototype =
{
名前: "sub"
}
function myClass()
{
/ /Constructor
}
myClass.prototype =
{
ID: 1,
名前: "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";
var obj2 = new myClass();


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


function myClass(id, name )
{
this.ID = id;
this.Name = 名前;
}
myClass.prototype =
{
showMessage: function()
{
alert ("ID: " this.ID ", Name: " this.Name);
},
showMessage2: function()
{
alert("Method2"); 🎜>}
}
var obj1 = new myClass(1, "ジョンソン");
obj1.Name="ジョン"; );
var obj2 = new myClass(2, "Amanda");


プライベート メンバー、共有メンバー、静的メンバー、クラスの継承についてクラス、仮想メソッド、クラス リフレクション、その他の実装メソッドは今後も書き留められ続けます。ただし、言っておきたいのは、私が書こうとしているのは JavaScript の基本的なオブジェクト指向実装であるということです。詳細な学習が必要な場合は、Li Zhan 兄弟の「Manna Model」を参照することをお勧めします。
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート