ホームページ > 記事 > ウェブフロントエンド > JSでクラスを定義する5つの方法を詳しく解説

JSでクラスを定義する5つの方法を詳しく解説

小云云オリジナル: 2017-12-02 09:22:561242ブラウズ

フロントエンド開発では、JavaScript が開発において非常に重要な役割を果たしていることが多くの場合、JS クラスを定義する必要があることがわかっています。 JavaScript ではクラスを定義する方法がいくつかありますが、それらは何でしょうか?この記事では、JS でクラスを定義する次の 5 つの方法について説明します。

1. ファクトリメソッド

function Car(){
var ocar = new Object;
ocar.color = “blue”;
ocar.doors = 4;
ocar.showColor = function(){
document.write(this.color)
};
return ocar;
}
var car1 = Car();
var car2 = Car();

この関数が呼び出されると、新しいオブジェクトが作成され、すべてのプロパティとメソッドがそれに割り当てられます。この関数を使用して、まったく同じプロパティを持つ 2 つのオブジェクトを作成します。

もちろん、このメソッドはパラメータを渡すことで変更できます。

function Car(color,door){
var ocar = new Object;
ocar.color = color;
ocar.doors = door;
ocar.showColor = function(){
document.write(this.color)
};
return ocar;
}
var car1 = Car(“red”,4);
var car2 = Car(“blue”,4);
car1.showColor() //output:”red”
car2.showColor() //output:”blue”

関数に異なるパラメータを渡すことで、異なる値を持つオブジェクトを取得できるようになりました。

前の例では、関数 Car() が呼び出されるたびに showcolor() を作成する必要があります。これは、各オブジェクトが独自の showcolor() メソッドを持つことを意味します。

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

function showColor(){
  
alert(this.color);
}
function Car(){
var ocar = new Object();
ocar.color = color;
ocar.doors = door;
ocar.showColor = showColor;
return ocar;
}

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

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

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

   
function Car(color,door){
this.color = color;
this.doors = door;
this.showColor = function(){
alert(this.color)
};
}
var car1 = new Car(“red”,4);
var car2 = new Car(“blue”,4);

コンストラクターメソッドは関数内にオブジェクトを作成せず、このキーワード。コンストラクターが呼び出されたときにオブジェクトが作成されており、関数内でオブジェクトのプロパティにアクセスするにはこれのみを使用できるためです。

new を使用してオブジェクトを作成すると、次のようになります。しかし、それは工場でのアプローチと同じです。各呼び出しでは、オブジェクトに独自のメソッドが作成されます。

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

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

function Car(){
}
Car.prototype.color = “red”;
Car.prototype.doors = 4;
Car.prototype.showColor = function(){
alert(this.color);
}
var car1 = new Car();
var car2 = new Car();

このコードでは、最初に空の関数が定義され、次にオブジェクトのプロパティがプロトタイプ属性を通じて定義されます。この関数が呼び出されると、プロトタイプのすべてのプロパティが作成されるオブジェクトに即座に割り当てられ、この関数のすべてのオブジェクトは showColor() へのポインターを格納し、構文的にはすべて同じオブジェクトに属しているように見えます。

ただし、この関数にはパラメーターがありません。オブジェクトの作成後にパラメーターを渡してプロパティを初期化することはできません。

プロトタイプメソッドに関する非常に深刻な問題は、プロパティが配列などのオブジェクトを指している場合です。

   
function Car(){
}
Car.prototype.color = “red”;
Car.prototype.doors = 4;
Car.prototype.arr = new Array(“a”,”b”);
Car.prototype.showColor = function(){
alert(this.color);
}
var car1 = new Car();
var car2 = new Car();
car1.arr.push(“cc”);
alert(car1.arr); //output:aa,bb,cc
alert(car2.arr); //output:aa,bb,cc

配列の参照値により、Car の 2 つのオブジェクトは同じ配列を指すため、car1 に値を追加すると、car2 にもその値が表示されます。

Union は、他のプログラミング言語と同様に、コンストラクター/プロトタイプメソッドを使用してオブジェクトを作成するメソッドです。コンストラクターを使用してオブジェクトの非関数属性を定義し、プロトタイプメソッドを使用してオブジェクトを定義します。

function Car(color,door){
this.color = color;
this.doors = door;
this.arr = new Array(“aa”,”bb”);
}
Car.prototype.showColor(){
alert(this.color);
}
var car1 = new Car(“red”,4);
var car2 = new Car(“blue”,4);
car1.arr.push(“cc”);
alert(car1.arr); //output:aa,bb,cc
alert(car2.arr); //output:aa,bb

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

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

   
function Car(color,door){
this.color = color;
this.doors = door;
this.arr = new Array(“aa”,”bb”);
if(typeof Car._initialized == “undefined”){
Car.prototype.showColor = function(){
alert(this.color);
};
Car._initialized = true;
}
}

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

5. 混合ファクトリメソッド

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

function Car(){
var ocar = new Object();
ocar.color = “red”;
ocar.doors = 4;
ocar.showColor = function(){
alert(this.color)
};
return ocar;
}

ファクトリーメソッドとの違いは、このメソッドが new 演算子を使用することです。

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

上記の内容は、JS でクラスを定義する 5 つの方法を詳しく説明したものであり、皆様のお役に立てれば幸いです。

JSでクラスを定義する5つの方法を詳しく解説

関連記事