ES6-クラス

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

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

まず、理解しましょう

  • Object−オブジェクトは、任意のエンティティのリアルタイム表現です。Grady Broochによると、すべてのオブジェクトには3つの特徴があると言われています-

    • State −オブジェクトの属性によって記述されます。

    • Behavior −オブジェクトがどのように動作するかを説明します。

    • Identity −オブジェクトをそのような類似のオブジェクトのセットから区別する一意の値。

  • Class− OOPに関するクラスは、オブジェクトを作成するための青写真です。クラスは、オブジェクトのデータをカプセル化します。

  • Method −メソッドはオブジェクト間の通信を容易にします。

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

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

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

構文：クラスの宣言

class Class_name {  
}

構文：クラス式

var var_name = new Class_name {  
}

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

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

  • Constructors −クラスのオブジェクトにメモリを割り当てる責任があります。

  • Functions−関数は、オブジェクトが実行できるアクションを表します。それらは、メソッドと呼ばれることもあります。

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

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

例：クラスの宣言

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

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

オブジェクトの作成

クラスのインスタンスを作成するには、newキーワードに続けてクラス名を使用します。以下はその構文です。

var object_name= new class_name([ arguments ])

どこ、

  • 新しいキーワードはインスタンス化を担当します。

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

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

var obj = new Polygon(10,12)

関数へのアクセス

クラスの属性と関数には、オブジェクトを介してアクセスできます。使用 '。'dot notation （ピリオドと呼ばれる）クラスのデータメンバーにアクセスします。

//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

セッターとゲッター

セッター

プロパティの値を設定しようとすると、セッター関数が呼び出されます。ザ・set keywordセッター関数を定義するために使用されます。セッター関数を定義するための構文を以下に示します-

{set prop(val) { . . . }}
{set [expression](val) { . . . }}

prop 指定された関数にバインドするプロパティの名前です。 val プロパティに割り当てようとした値を保持する変数のエイリアスです。 expression ES6では、特定の関数にバインドするためのプロパティ名として使用できます。

例

<script>
   class Student {
      constructor(rno,fname,lname){
         this.rno = rno
         this.fname = fname
         this.lname = lname
         console.log('inside constructor')
      }
      set rollno(newRollno){
         console.log("inside setter")
         this.rno = newRollno
      }
   }
   let s1 = new Student(101,'Sachin','Tendulkar')
   console.log(s1)
   //setter is called
   s1.rollno = 201
   console.log(s1)
</script>

上記の例では、クラスStudentを次のように定義しています。 three properties つまり rno, fname and lname。セッター機能rollno() rnoプロパティの値を設定するために使用されます。

上記のコードの出力は次のようになります-

inside constructor
Student {rno: 101, fname: "Sachin", lname: "Tendulkar"}
inside setter
Student {rno: 201, fname: "Sachin", lname: "Tendulkar"}

例

次の例は、 expression プロパティ名として setter function。

<script>
   let expr = 'name';
      let obj = {
      fname: 'Sachin',
      set [expr](v) { this.fname = v; }
   };
   console.log(obj.fname);
   obj.name = 'John';
   console.log(obj.fname);
</script>

上記のコードの出力は以下のようになります-

Sachin
John

ゲッター

A getter functionプロパティの値をフェッチしようとすると呼び出されます。ザ・get keywordゲッター関数を定義するために使用されます。ゲッター関数を定義するための構文を以下に示します-

{get prop() { ... } }
{get [expression]() { ... } }

prop 指定された関数にバインドするプロパティの名前です。

expression − ES6以降、式をプロパティ名として使用して、特定の関数にバインドすることもできます。

例

<script>
   class Student {
      constructor(rno,fname,lname){
         this.rno = rno
         this.fname = fname
         this.lname = lname
         console.log('inside constructor')
      }
      get fullName(){
         console.log('inside getter')
         return this.fname + " - "+this.lname
      }
   }
   let s1 = new Student(101,'Sachin','Tendulkar')
   console.log(s1)
   //getter is called
   console.log(s1.fullName)
</script>

上記の例では、3つのプロパティを持つクラスStudentを定義しています。 rno, fname and lname。ゲッター機能fullName() 連結します fname そして lname そして、新しい文字列を返します。

上記のコードの出力は次のようになります-

inside constructor
Student {rno: 101, fname: "Sachin", lname: "Tendulkar"}
inside getter
Sachin - Tendulkar

例

次の例は、式をゲッター関数でプロパティ名として使用する方法を示しています。

<script>
   let expr = 'name';
   let obj = {
      get [expr]() { return 'Sachin'; }
   };
   console.log(obj.name);
</script>

上記のコードの出力は以下のようになります-

Sachin

静的キーワード

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

例

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

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

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

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はの概念をサポートしています Inheritance。継承とは、既存のエンティティ（ここではクラス）から新しいエンティティを作成するプログラムの機能です。新しいクラスを作成するために拡張されたクラスは、parent class/super class。新しく作成されたクラスは、child/sub classes。

クラスは、「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は多重継承をサポートしていません。

  • Multi-level −次の例を考えてみましょう。

'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

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

Method Overriding子クラスがスーパークラスメソッドを再定義するメカニズムです。次の例は同じ-を示しています

'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()

ザ・ doPrint()StringWriterクラスの再定義は、その親クラスバージョンへの呼び出しを発行します。つまり、superキーワードは、親クラスであるPrinterClassのdoPrint（）関数定義を呼び出すために使用されます。

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

doPrint() from Parent called. 
doPrint() is printing a string.
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved