Es6-classes

提供：Dev Guides
移動先:案内、検索

ES6-クラス

オブジェクト指向*は、実世界のモデリングに従うソフトウェア開発パラダイムです。 オブジェクト指向では、プログラムを *methods と呼ばれるメカニズムを介して互いに通信するオブジェクトのコレクションと見なします。 ES6は、これらのオブジェクト指向コンポーネントもサポートしています。

オブジェクト指向プログラミングの概念

まず、理解してみましょう

  • オブジェクト-オブジェクトは、エンティティのリアルタイム表現です。 Grady Broochによると、すべてのオブジェクトは3つの特徴を持っていると言われています-
  • 状態-オブジェクトの属性によって記述されます。
  • 動作-オブジェクトの動作方法を説明します。
  • Identity -オブジェクトを類似のそのようなオブジェクトのセットから区別する一意の値。
  • クラス-OOPの観点でのクラスは、オブジェクトを作成するための青写真です。 クラスは、オブジェクトのデータをカプセル化します。
  • メソッド-メソッドはオブジェクト間の通信を容易にします。

これらのオブジェクト指向の概念を現実の概念に翻訳しましょう。 例：車は、データ（メーカー、モデル、ドアの数、車両番号など）と機能（加速、シフト、ドアを開く、ヘッドライトをオンにするなど）を持つオブジェクトです。

ES6より前は、クラスを作成するのは面倒でした。 クラスは、ES6のclassキーワードを使用して作成できます。

クラスを宣言するか、クラス式を使用して、クラスをコードに含めることができます。

構文：クラスの宣言

class Class_name {
}

構文：クラス式

var var_name = new Class_name {
}

classキーワードの後に​​クラス名が続きます。 クラスに名前を付けるときは、識別子のルール（既に説明した）を考慮する必要があります。

クラス定義には、次のものを含めることができます-

  • コンストラクタ-クラスのオブジェクトにメモリを割り当てる責任があります。
  • 関数-関数はオブジェクトが実行できるアクションを表します。 また、メソッドと呼ばれることもあります。

これらのコンポーネントをまとめて、クラスのデータメンバーと呼びます。

注-クラス本体にはメソッドのみを含めることができますが、データプロパティは含めることができません。

例：クラスの宣言

class Polygon {
   constructor(height, width) {
      this.height = height;
      this.width = width;
   }
}

例：クラス式

var Polygon = class {
   constructor(height, width) {
      this.height = height;
      this.width = width;
   }
}

上記のコードスニペットは、名前のないクラス式を表しています。 名前付きクラス式は次のように記述できます。 

var Polygon = class Polygon {
   constructor(height, width) {
      this.height = height;
      this.width = width;
   }
}

注意-変数や関数とは異なり、クラスを持ち上げることはできません。

オブジェクトを作成する

クラスのインスタンスを作成するには、newキーワードの後に​​クラス名を使用します。 以下は同じ構文です。 

var object_name= new class_name([ arguments ])

どこで、

  • 新しいキーワードはインスタンス化を担当します。
  • 式の右側は、コンストラクターを呼び出します。 パラメーター化されている場合、コンストラクターに値を渡す必要があります。

例：クラスのインスタンス化

var obj = new Polygon(10,12)

機能へのアクセス

クラスの属性と機能は、オブジェクトを介してアクセスできます。 クラスのデータメンバーにアクセスするには、「。」*ドット表記法（ピリオドと呼ばれる）を使用します。 

//accessing a function
obj.function_name()

例：それらをまとめる

'use strict'
class Polygon {
   constructor(height, width) {
      this.h = height;
      this.w = width;
   }
   test() {
      console.log("The height of the polygon: ", this.h)
      console.log("The width of the polygon: ",this. w)
   }
}

//creating an instance
var polyObj = new Polygon(10,20);
polyObj.test();

上記の例では、クラス「Polygon」を宣言しています。 クラスのコンストラクターは、それぞれ高さと幅の2つの引数を取ります。 「this」*キーワードは、クラスの現在のインスタンスを指します。 つまり、上記のコンストラクターは、コンストラクターに渡されたパラメーター値で2つの変数hとwを初期化します。 クラスの test（）*関数は、高さと幅の値を出力します。

スクリプトを機能させるために、Polygonクラスのオブジェクトが作成されます。 オブジェクトは polyObj 変数によって参照されます。 次に、このオブジェクトを介して関数が呼び出されます。

上記のコードが正常に実行されると、次の出力が表示されます。 

The height of the polygon:  10
The width of the polygon:  20

静的キーワード

staticキーワードは、クラス内の関数に適用できます。 静的メンバーはクラス名によって参照されます。

例

'use strict'
class StaticMem {
   static disp() {
      console.log("Static Function called")
   }
}
StaticMem.disp()//invoke the static metho

注意-コンストラクター定義を含めることは必須ではありません。 デフォルトでは、すべてのクラスにデフォルトでコンストラクターがあります。

上記のコードが正常に実行されると、次の出力が表示されます。 

Static Function called

instanceof演算子

オブジェクトが指定されたタイプに属する場合、instanceof演算子はtrueを返します。

例

'use strict'
class Person{ }
var obj = new Person()
var isPerson = obj instanceof Person;
console.log(" obj is an instance of Person " + isPerson);

上記のコードが正常に実行されると、次の出力が表示されます。 

obj is an instance of Person True

クラスの継承

ES6は*継承*の概念をサポートしています。 継承とは、既存のエンティティ（ここではクラス）から新しいエンティティを作成するプログラムの機能です。 新しいクラスを作成するために拡張されたクラスは、親クラス/スーパークラス*と呼ばれます。 新しく作成されたクラスは child/subクラス*と呼ばれます。

クラスは、「extends」キーワードを使用して別のクラスから継承します。 子クラスは、親クラスのコンストラクターを除くすべてのプロパティとメソッドを継承します。

以下は同じ構文です。 

class child_class_name extends parent_class_name

例：クラスの継承

'use strict'
class Shape {
   constructor(a) {
      this.Area = a
   }
}
class Circle extends Shape {
   disp() {
      console.log("Area of the circle:  "+this.Area)
   }
}
var obj = new Circle(223);
obj.disp()

上記の例では、クラスShapeを宣言しています。 クラスはCircleクラスによって拡張されます。 クラス、つまり子クラスの間には継承関係があるため、クラスCircleは親クラス属性、つまりareaへの暗黙的なアクセスを取得します。

上記のコードが正常に実行されると、次の出力が表示されます。 

Area of Circle: 223

継承は次のように分類できます-

  • Single -すべてのクラスは、1つの親クラスから最大で拡張できます。
  • Multiple -クラスは複数のクラスから継承できます。 ES6は多重継承をサポートしていません。
  • マルチレベル-次の例を検討してください。
'use strict'
class Root {
   test() {
      console.log("call from parent class")
   }
}
class Child extends Root {}
class Leaf extends Child

//indirectly inherits from Root by virtue of inheritance {}
var obj = new Leaf();
obj.test()

クラスLeafは、マルチレベルの継承により、RootクラスとChildクラスから属性を派生します。

上記のコードが正常に実行されると、次の出力が表示されます。 

call from parent class

クラスの継承とメソッドのオーバーライド

  • メソッドのオーバーライド*は、子クラスがスーパークラスメソッドを再定義するメカニズムです。 次の例は同じことを示しています-
'use strict' ;
class PrinterClass {
   doPrint() {
      console.log("doPrint() from Parent called… ");
   }
}
class StringPrinter extends PrinterClass {
   doPrint() {
      console.log("doPrint() is printing a string…");
   }
}
var obj = new StringPrinter();
obj.doPrint();

上記の例では、子クラスがスーパークラス関数の実装を変更しています。

上記のコードが正常に実行されると、次の出力が表示されます。 

doPrint() is printing a string…

スーパーキーワード

ES6では、子クラスが親クラスのデータメンバーを呼び出すことができます。 これは、 super キーワードを使用して実現されます。 superキーワードは、クラスの直接の親を参照するために使用されます。

次の例を考慮してください- 

'use strict'
class PrinterClass {
   doPrint() {
      console.log("doPrint() from Parent called…")
   }
}
class StringPrinter extends PrinterClass {
   doPrint() {
      super.doPrint()
      console.log("doPrint() is printing a string…")
   }
}
var obj = new StringPrinter()
obj.doPrint()

クラスStringWriterの* doPrint（）*再定義は、親クラスバージョンへの呼び出しを発行します。 つまり、superキーワードを使用して、親クラスであるPrinterClassのdoPrint（）関数定義を呼び出します。

上記のコードが正常に実行されると、次の出力が表示されます。 

doPrint() from Parent called.
doPrint() is printing a string.
「https://www.finddevguides.com/index.php?title=Es6-classes&oldid=28387」から取得
Powered by MediaWiki