フロントエンドの開発では、JSクラスを定義する必要があることがよくあります。 JavaScriptには、クラスを定義する方法がいくつかあり、違いは何ですか？この記事では、JSクラスを定義する次の6つの方法について説明します（ケース説明）。
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）}; var car1 = car（ "red"、4）; var car2 = car（ " // output： "red" car2.showcolor（）// output： "blue"これで、異なるパラメーターを関数に渡すことにより、異なる値のオブジェクトを取得できます。
前の例では、function car（）が呼び出されるたびに、showcolor（）が作成されます。つまり、各オブジェクトには独自のshowcolor（）メソッドがあります。
しかし、実際、各オブジェクトは同じ関数を共有しています。メソッドは関数の外側で定義できますが、関数のプロパティをメソッドに向けることにより。
function showcolor（）{alert（this.color）;} function car（）{var ocjed = 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）;コンストラクターメソッドは関数内にオブジェクトを作成しないことがわかり、これが使用されるキーワードがあります。コンストラクターを呼び出すときにオブジェクトが作成されており、これは関数内のオブジェクトプロパティにのみアクセスするためにのみ使用できます。
新しいものを使用してオブジェクトを作成します。それはそのように見えます！しかし、それは工場と同じです。各呼び出しは、オブジェクトの独自の方法を作成します。
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（）にポインターを保存します。これは、構文的に同じオブジェクトに属していると思われます。
ただし、この関数にはパラメーターがなく、パラメーターを渡すことで属性を初期化することはできません。オブジェクトが作成された後、属性のデフォルト値を変更する必要があります。
プロトタイプ法の非常に深刻な問題は、属性が配列などのオブジェクトを指すときです。
funcnhalcar（）{} car.prototype.color = "red"; car.prototype.doors = 4; car.prototype.arr = new Array（ "a"、 "、" b "）; car.prototype.showcolor = function = function（）{alert（this.color）;} var car car car car（）; car1.arr.push（ "cc"）; alert（car1.arr）; //output：aa,bb、cclert(car2.arr）; //出力：AA、BB、CCここでは、配列の基準値のため、両方のCARオブジェクトが同じ配列を指しているため、CAR1に値が追加されると、CAR2でも表示できます。
ユニオンは、コンストラクター/プロトタイプを使用して他のプログラミング言語のようなオブジェクトを作成できる方法です。これは、コンストラクターを使用してオブジェクトの非機能特性を定義し、プロトタイプを使用してオブジェクトを定義する方法です。
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 new car（ "blue"、4）; car1.arr.push（ "cc"）; alert（car1.arr）; //output：aa,bb、ccalert(car2.arr）; //出力：AA、BB5。動的プロトタイプメソッド
動的プロトタイプ法は、混合コンストラクター/プロトタイプ法に似ています。唯一の違いは、オブジェクトの方法に与えられる位置です。
function car（color、door）{this.color = color; this.doors = door; this.arr = new Array（ "aa"、 "bb"）; if（typeof car._initialized == "未定義"）{car.prototype.showcolor = function（）{alert）;動的プロトタイプ法は、フラグを使用して、プロトタイプにメソッドが割り当てられているかどうかを判断することです。これにより、メソッドが一度だけ作成されることが保証されます
6。混合工場法
その目的の教師は、別のオブジェクトの新しいインスタンスのみを返す偽のコンストラクターを作成します。
function car（）{var ocar = new object（）; ocar.color = "red"; ocar.doors = 4; ocar.showcolor = function（）{alert（this.color）}; return ocar;}ファクトリーメソッドとは異なり、この方法では新しい演算子を使用します。
上記はすべてオブジェクトを作成する方法です。最も広く使用されている方法は、ハイブリッドコンストラクター/プロトタイプ法であり、動的プロトタイプ法も非常に人気があります。コンストラクター/プロトタイプ法と機能的に同等です。
JSクラスを定義する6つの方法の上記の詳細な説明は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。