JavaScriptのクラス定義方法まとめ_基礎知識

JS でクラスを定義するにはさまざまな方法があります:

1. ファクトリーメソッド

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

function Car(){
var ocar = 新しいオブジェクト
ocar.color = "青"; ocar.doors = 4; ocar.showColor = function(){
Document.write(this.color)
};
オカルを返します
}
var car1 = 車(); var car2 = 車();


この関数が呼び出されると、新しいオブジェクトが作成され、すべてのプロパティとメソッドがそれに割り当てられます。この関数を使用して、まったく同じプロパティを持つ 2 つのオブジェクトを作成します。もちろん、妹はパラメータを渡すことでこのメソッドを変更できます。

コードをコピーします

コードは次のとおりです: 関数 車(色,ドア){ var ocar = 新しいオブジェクト

ocar.color = 色; ocar.doors = ドア

ocar.showColor = function(){
Document.write(this.color)
};
オカルを返します
}
var car1 = 車("赤",4); var car2 = Car("青",4); car1.showColor() //出力:"赤"
car2.showColor() //出力:"青"



関数に異なるパラメータを渡すことで、異なる値を持つオブジェクトを取得できるようになりました。
前の例では、関数 Car() が呼び出されるたびに showcolor() が作成されます。これは、各オブジェクトが独自の showcolor() メソッドを持つことを意味します。

しかし実際には、各オブジェクトは同じ機能を共有します。
ただし、関数の外でメソッドを定義し、関数のプロパティをそのメソッドにポイントすることは可能です。

コードをコピーします

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

関数 showColor(){ アラート(this.color); } function Car(){ var ocar = 新しいオブジェクト; ocar.color = 色; ocar.doors = ドア

ocar.showColor = showColor

オカルを返します
}



しかし、これは関数メソッドのようには見えません。

2. コンストラクターメソッド

以下に示すように、コンストラクター メソッドはファクトリ メソッドと同じくらい単純です。

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

機能 車(色、ドア) コンストラクター メソッドは関数内にオブジェクトを作成せず、this キーワードを使用していることがわかります。コンストラクターが呼び出されたときにオブジェクトが作成されており、関数内でオブジェクトのプロパティにアクセスするにはこれのみを使用できるためです。 new を使用してオブジェクトを作成すると、次のようになります。しかし、それは工場でのアプローチと同じです。各呼び出しでは、オブジェクトに独自のメソッドが作成されます。

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

このメソッドはオブジェクトのプロトタイプ属性を使用します。まず、空の関数を使用してクラス名が作成され、次にすべてのプロパティとメソッドにプロトタイプ属性が割り当てられます。

コードをコピーします

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

関数 Car() このコードでは、最初に空の関数が定義され、次にオブジェクトのプロパティがプロトタイプ属性を通じて定義されます。この関数が呼び出されると、プロトタイプのすべてのプロパティが作成されるオブジェクトに即座に割り当てられ、この関数のすべてのオブジェクトは showColor() へのポインターを格納し、構文的にはすべて同じオブジェクトに属しているように見えます。 ただし、この関数にはパラメータがないため、パラメータを渡してプロパティを初期化することはできません。オブジェクトの作成後にプロパティのデフォルト値を変更する必要があります。 プロトタイプ メソッドの重大な問題は、プロパティが配列などのオブジェクトを指している場合です。

コードをコピー

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

function Car(){
}
Car.prototype.color = "赤"; Car.prototype.doors = 4; Car.prototype.arr = new Array("a","b"); Car.prototype.showColor = function(){
アラート(this.color); }
var car1 = 新しい車()
var car2 = 新しい車()
car1.arr.push("cc"); アラート(car1.arr); //出力:aa,bb,cc
アラート(car2.arr); //出力:aa,bb,cc



配列の参照値により、Car の 2 つのオブジェクトは同じ配列を指すため、その値を car1 に追加すると、car2 にもその値が表示されます。
Union は、他のプログラミング言語と同様に、コンストラクター/プロトタイプ メソッドを使用してオブジェクトを作成するメソッドです。コンストラクターを使用してオブジェクトの非機能属性を定義し、プロトタイプ メソッドを使用してオブジェクトを定義します。

コードをコピーします

コードは次のとおりです: 関数 車(色,ドア){ This.color = 色 This.doors = ドア

This.arr = new Array("aa","bb"); }

Car.prototype.showColor(){
アラート(this.color); }
var car1 = 新しい車("赤",4); var car2 = 新しい車("青",4); car1.arr.push("cc"); アラート(car1.arr); //出力:aa,bb,cc
アラート(car2.arr); //出力:aa,bb




4. 動的プロトタイプメソッド


動的プロトタイプ メソッドの原理は、混合コンストラクター/プロトタイプ メソッドの原理と似ています。唯一の違いは、オブジェクト メソッドが割り当てられる場所です。

コードをコピーします

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

関数 車(色,ドア){

This.color = 色 This.doors = ドア This.arr = new Array("aa","bb"); If(Car のタイプ._initialized == "未定義"){ Car.prototype.showColor = function(){ アラート(this.color); }; Car._initialized = true; } }

動的プロトタイプ メソッドは、フラグを使用して、メソッドがプロトタイプに割り当てられているかどうかを判断します。これにより、メソッドが 1 回だけ作成されることが保証されます



6. 工場での混合方法


その目的は、別のオブジェクトの新しいインスタンスを返すだけの偽のコンストラクターを作成することです。

コードをコピーします

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

function Car(){

var ocar = 新しいオブジェクト

; ocar.color = "赤"; ocar.doors = 4; ocar.showColor = function(){

アラート(this.color)

}; オカルを返します } ファクトリメソッドとの違いは、このメソッドが new 演算子を使用することです。

PS (個人的な理解):

1) プロトタイプを通じてクラスによって定義されたメンバー (メソッドまたは属性) は、すべてのクラス オブジェクトに共通であり、通常、1 つのオブジェクトが属性値を変更すると、すべてのオブジェクトが変更されます。 >
2) クラスにはプロトタイプ属性がありますが、クラス オブジェクトにはありません。
3) 新しいクラス オブジェクトまたはクラスが (以下のファクトリ メソッドの形式で) 直接呼び出されるたびに、クラス (関数) を定義するステートメントが 1 回実行されます (シングルトン モードではこの状況を回避できます)。

4) クラスは関数型であり、クラス オブジェクトはオブジェクト型であり、関数型のみがプロトタイプ属性を持ちます。
5) プロトタイプで定義されたメソッドは、クラスのプライベート変数 (クラスで定義されたローカル変数) にはアクセスできませんが、クラスのメンバープロパティとメンバーメソッド (this で定義された変数とメソッド) には this を通じてアクセスできます。

6) クラスを定義する方法:

a. ファクトリメソッド (オブジェクト)

b. 継承メソッド(プロトタイプ)

c. コンストラクターメソッド (this)

d.混合方法

7) [質問] プロトタイプで定義されたプロパティは、どのオブジェクトでも変更できるのはなぜですか?そして、コンストラクターメソッドで定義されたプロパティはそのオブジェクトにのみ属し、他のオブジェクトのプロパティ値には影響を与えないのでしょうか？

上記はオブジェクトを作成するためのすべてのメソッドです。現在最も広く使用されている方法は、コンストラクターとプロトタイプの混合方法です。また、動的プロトタイプ方法も非常に人気があります。機能的にはコンストラクター/プロトタイプのアプローチと同等です。