js オブジェクト指向 オブジェクトを作成するさまざまな方法のまとめ_js オブジェクト指向

オブジェクトの作成を開始します:

1. オブジェクト リテラル。

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

var Clock={
hour: 12,
分:10,
秒:10,
showTime:function(){
alert(this.hour ":" this.month ":" this.second); }
}
クロック.showTime();//

を呼び出します。2. オブジェクト インスタンスを作成します。

コードをコピーします。 > コードは次のとおりです。 >クロック.showHour=function (){alert(クロック.時間);}; クロック.showHour();//

これは、属性を動的に追加できることを示します



オブジェクト作成モード:

1. ファクトリ モード: これは関数であり、パラメーターを入力してオブジェクトを返し、パイプラインが動作します

コードをコピーします


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

function createClock(hour, minutes, Second){ var クロック = 新しいオブジェクト(); クロック.分=分; クロック.showHour=function(){ アラート(この時間 ":" この.分 " :" };

時計を返します;

var newClock(12,12,12); //Instantiate
newClock.showHour() ;//Call


利点: 最後に、利点は抽象的な概念です。しかし、オブジェクトの種類が認識できません。

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




コードをコピーします。

コードは次のとおりです。 >関数 Clock(時,分,秒){
this.hour = 時;
this.秒 = 秒;
this.showTime = function() 🎜>alert(この時間 ":" この.分 ":" この秒);
}

} var newClock =新しい時計(12,12,12); newClock.hour); 注: new キーワードが追加されていない場合、クロックはコンストラクターとして呼び出されず、通常の関数として呼び出されます。同時に、コンストラクター内のこれがこの時点で外側のスコープにマップされているため、属性が誤って外側のスコープであるウィンドウに追加されてしまいます。したがって、安全を期すために、

コードをコピーします


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


関数クロック(時、分、秒){
if(時計のインスタンス){
この.時間 = 分;
この.秒 = 秒;
this.showTime = function(){

alert(this.hour ":" this.nutrition ":" this.second);
}
}

else{ throw new Error("インスタンスを作成するには ' new' を追加してください"); } } コンストラクターの欠点: オブジェクト インスタンスが使用されると this ポインターが変化するため、新しいインスタンスを指します。このとき、新しいインスタンスのメソッドも再作成する必要があります。インスタンスが n 個ある場合は、同じメソッドを n 回再作成する必要があります。それでは、プロトタイプ モードを明らかにしましょう

3. プロトタイプ モード




コードをコピーします


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

関数クロック(時、分、秒){
}
クロック.プロトタイプ.時間=12;
クロック.プロトタイプ.分=12; . Second=12;
クロック.prototype.showTime=function(){

alert(this.hour ":" this.month ":" this.second);
var newClock =新しい時計();
newClock.showTime();
プロトタイプモデルを深く理解することが重要です。

まず、各関数にはプロトタイプ (prototype) 属性があり、このポインタは Clock.prototype オブジェクトを指します。このプロトタイプ オブジェクトには、デフォルトで、クロックを指すプロパティ コンストラクターがあり、このプロパティは読み取りおよび書き込み可能です。オブジェクトをインスタンス化するとき、コンストラクターによって定義されたプロパティとメソッド (コンストラクター内のみに注意) に加えて、インスタンス newClock には、ECMAScript が [[ プロトタイプ]] を呼び出すコンストラクターのプロトタイプへのポインターも含まれます。オブジェクトをインスタンス化するとき、プロトタイプはインスタンス化されていないため、プロトタイプ オブジェクトのメソッドは特定のインスタンスにはありません。 (ナンセンスな部分がたくさんあります。誤解を招いたわけではありません。混乱しないでください)

したがって、このモードで定義されたオブジェクトについては、メソッドを呼び出すときに次のようにします。インスタンス内にプロトタイプが存在するかどうか、および呼び出しがあるかどうか。したがって、プロトタイプはトレースされず、エラーもなく、呼び出しは失敗します。

もちろん、次のように書くこともできます:

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

functionクロック(時,分,秒){
}
クロック.prototype={
コンストラクター:クロック, //このプロパティは手動で設定する必要があります。そうでない場合、コンストラクターが壊れてしまいます。プロトタイプをインスタンスで共有する意味はもうありません。
時:12、
分:12、
秒:12、
showTime:function(){
alert(this.hour ":" this.nutrition ":" this.second )
}
}
var newClock = new Clock();
newClock.showTime();

注: インスタンスとコンストラクター プロトタイプ間の接続はまた、ポインタを介して接続することもできるため、プロトタイプを変更するメソッドを動的に追加できます。

この純粋なプロトタイプ モデルの問題も明らかで、すべての属性とメソッドが共有されており、オブジェクトを具体化することができません。多くの場合、私たちは各オブジェクトが独自のプロパティを持っていると考えます。したがって、最初の 2 つを組み合わせて、新しいモデルが生成されます

4. 構築とプロトタイプの組み合わせモード。

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

function Clock(時、分、秒) {
この.時間 = 時間;
この.秒 = 秒;

クロック.prototype.showTime=function(){alert(この.時間 ":" この.分 ":" この.秒);}
var newClock = 新しい時計(12,12,12);


こちら オブジェクトをより具体的にするために、コンストラクターにプロパティを置きます。