ES6 - 類

面向物件是一種遵循現實世界建模的軟體開發正規化。面向物件將程式視為物件的集合，這些物件透過稱為方法的機制相互通訊。ES6 也支援這些面向物件的元件。

面向物件程式設計概念

首先，讓我們瞭解

物件 - 物件是任何實體的即時表示。根據 Grady Brooch 的說法，每個物件都被認為具有 3 個特徵 -
- 狀態 - 由物件的屬性描述。
- 行為 - 描述物件將如何行動。
- 標識 - 一個唯一的值，將一個物件與一組類似的物件區分開來。
類 - 在 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 ])

其中，

new 關鍵字負責例項化。
表示式的右側呼叫建構函式。如果建構函式是引數化的，則應向其傳遞值。

示例：例項化一個類

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”的類。該類的建構函式接受兩個引數 - 分別為高度和寬度。“this”關鍵字指的是類的當前例項。換句話說，上面的建構函式使用傳遞給建構函式的引數值初始化了兩個變數 h 和 w。類中的test()函式列印高度和寬度的值。

為了使指令碼能夠正常工作，建立了 Polygon 類的物件。該物件由polyObj變數引用。然後透過此物件呼叫該函式。

在成功執行上述程式碼後，將顯示以下輸出。

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

Setter 和 Getter

Setter

當嘗試設定屬性的值時，將呼叫 setter 函式。set 關鍵字用於定義 setter 函式。定義 setter 函式的語法如下所示 -

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

prop是要繫結到給定函式的屬性的名稱。val是變數的別名，該變數儲存嘗試分配給屬性的值。使用 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 的類，其中包含三個屬性，即rno、fname 和 lname。setter 函式rollno()用於設定 rno 屬性的值。

上述程式碼的輸出將如下所示 -

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

示例

以下示例演示瞭如何使用表示式作為具有setter 函式的屬性名稱。

<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

Getter

當嘗試獲取屬性的值時，將呼叫getter 函式。get 關鍵字用於定義 getter 函式。定義 getter 函式的語法如下所示 -

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

prop是要繫結到給定函式的屬性的名稱。

表示式 - 從 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>

以上示例定義了一個名為 Student 的類，其中包含三個屬性，即rno、fname 和 lname。getter 函式fullName()連線fname和lname並返回一個新字串。

上述程式碼的輸出將如下所示 -

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

示例

以下示例演示瞭如何使用表示式作為具有 getter 函式的屬性名稱 -

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

上述程式碼的輸出將如下所示 -

Sachin

Static 關鍵字

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 支援繼承的概念。繼承是指程式能夠從現有實體（此處為類）建立新實體的能力。要擴充套件以建立新類的類稱為父類/超類。新建立的類稱為子/子類。

類使用“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

繼承可以分類為 -

單一繼承 - 每個類最多可以從一個父類繼承。
多繼承 - 一個類可以從多個類繼承。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…

Super 關鍵字

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.

列印頁面