Javascript オブジェクト指向 (ステートメント)_js オブジェクト指向

私の知識の少なさと知識の少なさから、『Javascript Advanced Programming』から内容の一部を抜粋しました。これらは私の読書メモとも言えます。 Javascriptのオブジェクト指向の仕組みは非常に重要であり、内容も非常に広範囲に及ぶため、ここでは章に分けて一つずつ紹介していきます。

オブジェクトを使用するには、まずそれを宣言する必要があります (もちろん、組み込みオブジェクトの場合は必要ありません)。 Javascript は常に私たちの脳細胞を大量に死なせます。この記事では主に Javascript クラスを宣言するいくつかの方法について説明します。

ファクトリー モード
ファクトリー モードは、多くの開発者が使用するモードかもしれません。簡単に言うと、このメソッドは最初に「基盤」を定義し、それをさまざまな関数の上に投げます (バインディング)。そしてプロパティ。次のコードは非常に見覚えがあるかもしれません:

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

var oCar = 新しいオブジェクト;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color)
oCar.showColor ();

もちろん、クラスにパッケージ化されているため、再利用する必要があります (上記のメソッドは構文的には単なる変数です)。特定のオブジェクトを返すファクトリ関数を使用してカプセル化できます:

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

function createCar() {
var oCar = 新しいオブジェクト;
oCar.showColor = function() {
alert(this.color) ;
}

return oCar;
}
oCar.showColor();


もちろん変更します, createCar 関数にいくつかのパラメーターを追加できます。これは非常にプロフェッショナルに見えます:

コードをコピー コードは次のとおりです: function createCar(sColor) {

var oCar = new Object;

oCar.showColor = function() {
alert(this.color) ) ;
}

return oCar;
}
oCar.showColor();


人々は非常に奥深いものを感じますが、時には自分自身を混乱させることもあります。長さを考慮しない場合は、外部で定義できます:

コードをコピー

コードは次のとおりです: function showColor () { alert(this.color);

function createCar(sColor) {

var oCar = new Object; = sColor;
oCar.showColor = showColor;

を返す;
oCar();


これも実行してください 利点の 1 つは、oCar.showColor を繰り返し定義する必要がないことです (誰もが効率的なプログラムを好みます)。


コンストラクター パターン

コンストラクターは実際にはファクトリ メソッドに似ています。コード量の観点から見ると、コンストラクター内でオブジェクトが作成されないことを意味します。

コードをコピーします

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

function Car(sColor) { this.color = sColor; this.showColor = function () { alert(this.color); } oCar = new Car("red"); >oCar.showColor();

実際、この暗黙的なオブジェクトは new 後にインスタンス化されています。デフォルトでは、コンストラクターは this の値を返します (したがって return を使用する必要はありません)。ただし、コンストラクター パターンは、ファクトリ パターンと同様にメソッドを繰り返し定義する可能性があります。この点については、前述のファクトリ パターンを参照することで回避できます (常に不完全に見えます)。


プロトタイプ モード

定義の繰り返しの問題にはもう飽きたので、完璧な解決策はあるのでしょうか?もちろんあります。プロトタイプ手法を使用すると、このような問題を効果的に回避できます。

コードをコピー


コードは次のとおりです。
function Car() {}
Car.prototype .color = new Array("red", "green", "blue");

Car.prototype.showColor = function() { alert(this.color); 🎜>oCar = 新しい Car(); oCar.showColor();
ただし、このモードを使用するときに注意する必要があるのは、クラス内のすべてのプロパティとメソッドが共有される (実際にはポインター) ということです。これは、2 つの変数がインスタンス化されますが、一方の値が変更されると、他方も変更されることを意味します。

注: この段落の内容は変更されました。詳細については、こことここを参照してください (提案してくれた Brother Fish に感謝します)。

混合モード
上記で学んだ方法を組み合わせると、プロトタイプ モードの問題を簡単に解決でき、よりプロフェッショナルなプログラムのように見えます。 .メンバー。

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

function Car(sColor) {
this.color = sColor;
}
Car.prototype.showColor = function() {
alert(this.color);
}
oCar = new Car("red");
oCar.showColor();

上記のメソッドで宣言されたクラスの場合、showColor メソッドはプロトタイプ (インスタンスは 1 つだけ作成されます) であり、その他はコンストラクターです (干渉しません)お互いに）。

動的プロトタイピング モード
独自のメソッドを外部に保持することは、あまり環境に優しいとは言えません。次の方法は非常に「グリーン」です:

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

function Car() {
this.color = "red"; 🎜> if (typeof Car._initialized == "未定義") {
Car.prototype.showColor = function() {
alert(this.color);
Car._initialized = true;
}
}
oCar = new Car("red");


このメソッドは上記と同じ効果があります。ブレンディング モード。つまり、プロパティはコンストラクター内で定義されますが、メソッドはプロトタイプ パターンを使用します。唯一の違いは、オブジェクト メソッドが割り当てられる場所です。

Mixed Factory Pattern

Mixed Factory Pattern は、関数自体がオブジェクトであるため、構築パターンと混合パターンの統合として考えることができ、関数自体は new を使用してインスタンス化できます (どうぞこのように説明させてください)。


コードをコピー

コードは次のとおりです。 function Car() { var oCar = 新しいオブジェクト;

oCar.color = "red";

oCar.showColor = function() {
alert(this.color)

return oCar;
}
oCar = new Car();
oCar.showColor();


ただし、上記のファクトリー パターンと同様に、このメソッド定義の使用は避けることをお勧めします。 、繰り返しの宣言質問があります。

どのモードを選択しますか?
実際、上記の説明では、混合モードと動的プロトタイプ モードが通常使用されます (私は個人的には動的プロトタイプ モードに投票します)。ただし、不必要な無駄が生じるため、Factory パターンと Construction Pattern (または 2 つの組み合わせ) を単独で使用しないでください。

テストコード

楽しみのために小さな Javascript クラスを宣言します <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> </title> [Ctrl A