JavaScriptでクラスを定義する方法を詳しく解説（4つの方法）

JavaScriptでクラスを定義する方法を詳しく解説（4つの方法）_javascriptスキル

WBOY

リリース： 2016-05-16 15:24:21

オリジナル

1459 人が閲覧しました

この記事の例では、JavaScript でクラスがどのように定義されるかを説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

クラスの定義には 4 つの方法があります:

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

function createCar(name,color,price){
  var tempcar=new Object;
  tempcar.name=name;
  tempcar.color=color;
  tempcar.price=price;
  tempcar.getName=function(){
   document.write(this.name+"-----"+this.color+"<br>");
  };
  return tempcar;
}
var car1=new createCar("工厂桑塔纳","red","121313");
car1.getName();

ログイン後にコピー

特定の型のオブジェクトを作成して返すことができるファクトリ関数を定義します。見た目は良いですが、小さな問題があります。

新しい関数 showColor は呼び出されるたびに作成する必要があります。関数の外に移動できます。

function getName(){
  document.write(this.name+"-----"+this.color+"<br>");
}

ログイン後にコピー

ファクトリー関数で直接指定します

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

tempCar.getName = getName;

これにより、関数を繰り返し作成するという問題は回避されますが、オブジェクトメソッドのようには見えません。

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

function Car(name,color,price){
  this.name=name;
  this.color=color;
  this.price=price;
  this.getColor=function(){
   document.write(this.name+"-----"+this.color+"<br>");
  };
}
var car2=new Car("构造桑塔纳","red","121313");
car2.getColor();

ログイン後にコピー

最初のメソッドとの違いがわかります。コンストラクター内でオブジェクトが作成されていませんが、this キーワードが使用されています。

new を使用してコンストラクターを呼び出す場合、最初にオブジェクトが作成され、次に this を使用してアクセスされます。

この使用法は他のオブジェクト指向言語とよく似ていますが、この方法には関数を繰り返し作成するという前のものと同じ問題があります。

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

function proCar(){
}
proCar.prototype.name="原型";
proCar.prototype.color="blue";
proCar.prototype.price="10000";
proCar.prototype.getName=function(){
  document.write(this.name+"-----"+this.color+"<br>");
};
var car3=new proCar();
car3.getName();

ログイン後にコピー

コンストラクター Car は最初にコードなしで定義され、次にプロトタイプを通じてプロパティが追加されます。利点:

a. すべてのインスタンスは showColor へのポインターを格納するため、関数を繰り返し作成する問題が解決されます

b.instanceof を使用してオブジェクトの種類を確認できます

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

alert(car3 instanceof proCar);//true

欠点がある場合は、次のコードを追加してください:

proCar.prototype.drivers = newArray("mike", "sue");
car3.drivers.push("matt");
alert(car3.drivers);//outputs "mike,sue,matt"
alert(car3.drivers);//outputs "mike,sue,matt"

ログイン後にコピー

ドライバーは Array オブジェクトへのポインターであり、proCar の両方のインスタンスは同じ配列を指します。

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

function autoProCar(name,color,price){
  this.name=name;
  this.color=color;
  this.price=price;
  this.drives=new Array("mike","sue");
  if(typeof autoProCar.initialized== "undefined"){
   autoProCar.prototype.getName =function(){
   document.write(this.name+"-----"+this.color+"<br>");
   };
   autoProCar.initialized=true;
  }
}
var car4=new autoProCar("动态原型","yellow","1234565");
car4.getName();
car4.drives.push("newOne");
document.write(car4.drives);

ログイン後にコピー

このメソッドは、すべてのクラス定義が関数内で完了するので、関数を繰り返し作成することはできません。

この記事が JavaScript プログラミングのすべての人に役立つことを願っています。