ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript_js オブジェクト指向でクラスまたは関数を定義するいくつかの方法のまとめ

JavaScript_js オブジェクト指向でクラスまたは関数を定義するいくつかの方法のまとめ

WBOY
リリース: 2016-05-16 18:12:26
オリジナル
891 人が閲覧しました

オブジェクト指向について考えるとき、クラス、オブジェクト、カプセル化、継承、ポリモーフィズムを考えることができます。 『JavaScript Advanced Programming』(人民郵政出版社、曹立・張新訳、英語名:Professional JavaScript for Web Developers)という書籍に比較的詳しく記載されています。 JavaScript でクラスを定義するさまざまな方法を見てみましょう。
1.ファクトリ メソッド
JavaScript で独自のクラスとオブジェクトを作成するには、これをマスターする必要があります。次のコードのように、JavaScript のオブジェクトのプロパティをオブジェクトの作成後に動的に定義できることは誰もが知っています。 >

コードをコピー コードは次のとおりです:
効果は明ら​​かで違いがあるということを ぜひ。ちょっと面白い感じがします。コンストラクター内でオブジェクトを作成するには this キーワードを使用します。オブジェクトの作成に new 演算子を使用するのは非常に馴染みのあるものです。しかし、問題もあります。新しいオブジェクトが作成されるたびに、関数の作成を含むすべての属性が作成されます。つまり、クラスを定義する目的はメソッドとデータを共有することですが、 car1 オブジェクトと car2 オブジェクトは両方とも独立したプロパティと関数については、少なくともメソッドを共有する必要があります。これがプロトタイプのアプローチの利点です。

3.プロトタイプ メソッド

オブジェクトのプロトタイプ属性を使用すると、新しいオブジェクトの作成に依存するプロトタイプとしてそれを確認できます。方法は次のとおりです。




コードをコピーします


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


< script type="text/javascript "> //定義
function Car() {
};
Car.prototype.color = "red"; = 4;
Car .prototype.drivers = new Array("トム", "ジェリー"); Car.prototype.showColor = function() { alert(this.color); } //呼び出し: var car1 = new Car(); car1.showColor(); >alert(car1.drivers) ; car1.drivers.push("stephen");
alert(car1.drivers); //結果: トム、ジェリー、スティーブン
alert(car2.drivers) ; //結果: トム、ジェリー、スティーブン
//json を使用してプロトタイプの定義を簡素化できます:
Car.prototype =
{
color: "red",
doors : 4,
ドライバー: [ "トム", "ジェリー",'safdad'],
showColor: function() {
alert(this.color)
}
}< ;/スクリプト>


まず、このコードのコンストラクターにはコードがありません。次に、オブジェクトのプロトタイプ属性を介して属性を追加し、Car オブジェクトの属性を定義します。この方法は優れていますが、問題は、Car オブジェクトが Array ポインターを指していることです。一方のオブジェクト car1 が属性オブジェクト (配列 Array) の参照を変更すると、もう一方のオブジェクト car2 も同じ Array 配列を指していることです。属性オブジェクト (配列 Array) の参照を変更することはできません。
同時に、この問題は、プロトタイプが初期化パラメーターを受け取ることができないため、コンストラクターが正常に初期化できないという事実にも現れています。これには、別の解決方法、つまりハイブリッド コンストラクター/プロトタイプ パターンが必要です。
4. コンストラクター/プロトタイプ混合モード
コンストラクターとプロトタイプのメソッドを組み合わせてクラスを定義すると非常に便利です。
コードをコピー コードは次のとおりです:




このコンストラクターは、typeof Car._initialized が「unknown」に等しいかどうかを確認するまで変更されません。このコード行は、動的プロトタイプ メソッドの最も重要な部分です。この値が未定義の場合、コンストラクターはプロトタイプを使用してオブジェクトのメソッドの定義を続行し、Car._initialized を true に設定します。この値が定義されている場合 (その値が true の場合、typeof の値は Boolean です)、メソッドは作成されません。つまり、このメソッドはフラグ (_initialized) を使用して、プロトタイプにメソッドが割り当てられているかどうかを判断します。このメソッドは 1 回だけ作成され、割り当てられます。従来の OOP 開発者を満足させるために、このコードは他の言語のクラス定義に似ています。
6 ミキシングファクトリーメソッド

この方法は通常、前の方法が適用できない場合の回避策です。その目的は、別の種類のオブジェクトの新しいインスタンスを返すだけの偽のコンストラクターを作成することです。このコードは、ファクトリー関数とよく似ています:
コードをコピーします コードは次のとおりです:

関数 Car() {
var oTempCar = new Object();
oTempCar.doors=4;
oTempCar.showColor = function() {
alert(this.color);
}
return oTempCar;
}


この方法では、古典的な方法とは異なり、 new 演算子、実際のコンストラクターのように見せます:
var oCar = new Car();

new 演算子は Car() コンストラクター内で呼び出されるため、2 番目の新しい演算は無視されます。 (コンストラクターの外側)。コンストラクター内で作成されたオブジェクトは変数 var に戻されます。このアプローチには、オブジェクト メソッドの内部管理に関する従来のアプローチと同じ問題があります。強く推奨: 絶対に必要な場合を除き、この方法の使用は避けてください (第 15 章を参照)。
概要: (どのメソッドを使用するか)
現在最も広く使用されているメソッドは、コンストラクターとプロトタイプの混合メソッドです。さらに、動的プロトタイプのアプローチも一般的であり、機能的にはコンストラクター/プロトタイプのアプローチと同等です。これらの方法のいずれかを使用できます。ただし、コードに問題が発生する可能性があるため、従来のコンストラクターまたはプロトタイプのアプローチを単独で使用しないでください。


//ps
//static class (1 :function)
var CarCollection = new function() {
var _carCollection = new Array(); //global,private
this.Add = function(objCar) {
alert( '追加' );
} this.Get = function(carid) {
alert('Get')
}
//静的クラス (2:json); )

var Car = {
color: 'red',
doors: 4,
showColor: function() {alert(this.color) }
} 車。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート