JSでクラスを定義する方法の解説

JS でクラスを定義する方法はたくさんあります:

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);

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

ここで、配列の reference 値により、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

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

  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; 
   } 
  }

動的プロトタイプ メソッドは、フラグを使用して、メソッドがプロトタイプに割り当てられているかどうかを判断します。これにより、メソッドが 1 回だけ作成されることが保証されます
6. 混合ファクトリ メソッド
その目的は、偽のコンストラクターを作成し、別のオブジェクトの新しいインスタンスのみを返すことです。

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

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

関連記事:

JavaScriptの基本構文と変数の解説

jsの基本的でよく使われるメソッドの解説

jsの基本構文について詳しく解説

以上がJSでクラスを定義する方法の解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。