ES6 - Lớp học

Object Orientationlà một mô hình phát triển phần mềm theo mô hình thế giới thực. Hướng đối tượng, coi một chương trình như một tập hợp các đối tượng giao tiếp với nhau thông qua cơ chế được gọi làmethods. ES6 cũng hỗ trợ các thành phần hướng đối tượng này.

Các khái niệm về lập trình hướng đối tượng

Để bắt đầu, hãy để chúng tôi hiểu

• Object- Một đối tượng là một đại diện thời gian thực của bất kỳ thực thể nào. Theo Grady Brooch, mọi đồ vật được cho là có 3 đặc điểm:

  • State - Được mô tả bằng các thuộc tính của một đối tượng.

  • Behavior - Mô tả đối tượng sẽ hành động như thế nào.

  • Identity - Một giá trị duy nhất để phân biệt một đối tượng với một tập hợp các đối tượng tương tự như vậy.

• Class- Một lớp về mặt OOP là một bản thiết kế để tạo các đối tượng. Một lớp đóng gói dữ liệu cho đối tượng.

• Method - Phương pháp tạo điều kiện giao tiếp giữa các đối tượng.

Hãy để chúng tôi dịch các khái niệm Hướng đối tượng này sang các khái niệm trong thế giới thực. Ví dụ: Xe hơi là một đối tượng có dữ liệu (kiểu dáng, kiểu xe, số cửa, Số xe, v.v.) và chức năng (tăng tốc, sang số, mở cửa, bật đèn pha, v.v.)

Trước ES6, việc tạo ra một lớp là một công việc cầu kỳ. Các lớp có thể được tạo bằng từ khóa lớp trong ES6.

Các lớp có thể được đưa vào mã bằng cách khai báo chúng hoặc bằng cách sử dụng các biểu thức lớp.

Cú pháp: Khai báo một lớp

class Class_name {  
}

Cú pháp: Biểu thức lớp

var var_name = new Class_name {  
}

Từ khóa lớp được theo sau bởi tên lớp. Các quy tắc cho định danh (đã được thảo luận) phải được xem xét trong khi đặt tên cho một lớp.

Một định nghĩa lớp có thể bao gồm những điều sau:

• Constructors - Chịu trách nhiệm cấp phát bộ nhớ cho các đối tượng của lớp.

• Functions- Hàm thể hiện các hành động mà một đối tượng có thể thực hiện. Đôi khi chúng cũng được gọi là phương pháp.

Các thành phần này kết hợp với nhau được gọi là thành viên dữ liệu của lớp.

Note - Một phần thân của lớp chỉ có thể chứa các phương thức chứ không thể chứa các thuộc tính dữ liệu.

Ví dụ: Khai báo một lớp

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

Ví dụ: Biểu thức lớp

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

Đoạn mã trên đại diện cho một biểu thức lớp không được đặt tên. Một biểu thức lớp được đặt tên có thể được viết dưới dạng.

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

Note - Không giống như các biến và hàm, các lớp không thể được kéo lên.

Tạo đối tượng

Để tạo một thể hiện của lớp, hãy sử dụng từ khóa mới theo sau là tên lớp. Sau đây là cú pháp cho tương tự.

var object_name= new class_name([ arguments ])

Ở đâu,

• Từ khóa mới chịu trách nhiệm về việc khởi tạo.

• Phía bên phải của biểu thức gọi hàm tạo. Hàm tạo phải được truyền các giá trị nếu nó được tham số hóa.

Ví dụ: Khởi tạo một lớp

var obj = new Polygon(10,12)

Truy cập các chức năng

Các thuộc tính và chức năng của một lớp có thể được truy cập thông qua đối tượng. Sử dụng '.'dot notation (được gọi là dấu chấm) để truy cập các thành viên dữ liệu của một lớp.

//accessing a function 
obj.function_name()

Ví dụ: Đặt chúng lại với nhau

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

Ví dụ ở trên khai báo một lớp 'Polygon'. Hàm tạo của lớp nhận hai đối số - chiều cao và chiều rộng tương ứng. Các‘this’từ khóa đề cập đến phiên bản hiện tại của lớp. Nói cách khác, hàm tạo ở trên khởi tạo hai biến h và w với các giá trị tham số được truyền cho hàm tạo. Cáctest () trong lớp, in ra các giá trị của chiều cao và chiều rộng.

Để làm cho script hoạt động, một đối tượng của lớp Polygon được tạo. Đối tượng được tham chiếu bởipolyObjBiến đổi. Sau đó, hàm được gọi thông qua đối tượng này.

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

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

Người định cư và Người lập nghiệp

Người định cư

Một hàm setter được gọi khi có cố gắng đặt giá trị của một thuộc tính. Cácset keywordđược sử dụng để xác định một hàm setter. Cú pháp để xác định một hàm setter được đưa ra dưới đây:

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

prop là tên của thuộc tính để liên kết với hàm đã cho. val là một bí danh cho biến chứa giá trị được cố gắng gán cho thuộc tính. expression với ES6, có thể được sử dụng làm tên thuộc tính để liên kết với hàm đã cho.

Thí dụ

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

Ví dụ trên định nghĩa một lớp Học sinh với three properties cụ thể là rno, fname and lname. Một chức năng setterrollno() được sử dụng để đặt giá trị cho thuộc tính rno.

Đầu ra của đoạn mã trên sẽ như hình dưới đây:

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

Thí dụ

Ví dụ sau đây cho thấy cách sử dụng expression như một tên tài sản với một 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>

Đầu ra của đoạn mã trên sẽ như được đề cập bên dưới:

Sachin
John

Getters

A getter functionđược gọi khi có nỗ lực tìm nạp giá trị của một thuộc tính. Cácget keywordđược sử dụng để xác định một hàm getter. Cú pháp để xác định một hàm getter được đưa ra dưới đây:

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

prop là tên của thuộc tính để liên kết với hàm đã cho.

expression - Bắt đầu với ES6, bạn cũng có thể sử dụng các biểu thức làm tên thuộc tính để liên kết với hàm đã cho.

Thí dụ

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

Ví dụ trên định nghĩa một lớp Sinh viên với ba thuộc tính cụ thể là rno, fname and lname. Hàm getterfullName() nối các fname và lname và trả về một chuỗi mới.

Đầu ra của đoạn mã trên sẽ như dưới đây:

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

Thí dụ

Ví dụ sau đây cho thấy cách sử dụng một biểu thức làm tên thuộc tính với một hàm getter:

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

Đầu ra của đoạn mã trên sẽ như được đề cập bên dưới:

Sachin

Từ khóa tĩnh

Từ khóa static có thể được áp dụng cho các hàm trong một lớp. Các thành viên tĩnh được tham chiếu bởi tên lớp.

Thí dụ

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

Note- Không bắt buộc phải đưa vào định nghĩa hàm tạo. Theo mặc định, mỗi lớp đều có một phương thức khởi tạo.

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

Static Function called

Toán tử instanceof

Toán tử instanceof trả về true nếu đối tượng thuộc kiểu được chỉ định.

Thí dụ

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

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

obj is an instance of Person True

Kế thừa giai cấp

ES6 hỗ trợ khái niệm Inheritance. Kế thừa là khả năng của một chương trình để tạo các thực thể mới từ một thực thể hiện có - ở đây là một lớp. Lớp được mở rộng để tạo các lớp mới hơn được gọi làparent class/super class. Các lớp mới được tạo được gọi làchild/sub classes.

Một lớp kế thừa từ một lớp khác bằng cách sử dụng từ khóa 'expand'. Các lớp con kế thừa tất cả các thuộc tính và phương thức ngoại trừ các hàm tạo từ lớp cha.

Sau đây là cú pháp cho tương tự.

class child_class_name extends parent_class_name

Ví dụ: Kế thừa lớp

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

Ví dụ trên khai báo một Hình dạng lớp. Lớp được mở rộng bởi lớp Circle. Vì có một mối quan hệ kế thừa giữa các lớp, lớp con tức là lớp Circle nhận được quyền truy cập ngầm vào thuộc tính lớp cha của nó, tức là khu vực.

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

Area of Circle: 223

Thừa kế có thể được phân loại là -

• Single - Mỗi lớp có thể mở rộng nhiều nhất từ ​​một lớp cha.

• Multiple- Một lớp có thể kế thừa từ nhiều lớp. ES6 không hỗ trợ đa kế thừa.

• Multi-level - Hãy xem xét ví dụ sau.

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

Lớp Lá lấy các thuộc tính từ các lớp Gốc và Lớp con nhờ kế thừa đa cấp.

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

call from parent class

Kế thừa lớp và ghi đè phương thức

Method Overridinglà một cơ chế mà lớp con định nghĩa lại phương thức của lớp cha. Ví dụ sau minh họa tương tự:

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

Trong ví dụ trên, lớp con đã thay đổi cách thực hiện của hàm lớp cha.

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

doPrint() is printing a string…

Từ khóa siêu cấp

ES6 cho phép một lớp con gọi thành viên dữ liệu lớp cha của nó. Điều này đạt được bằng cách sử dụngsupertừ khóa. Từ khóa super được sử dụng để chỉ lớp cha trực tiếp của một lớp.

Hãy xem xét ví dụ sau:

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

Các doPrint()định nghĩa lại trong lớp StringWriter, đưa ra lời gọi đến phiên bản lớp cha của nó. Nói cách khác, từ khóa super được sử dụng để gọi định nghĩa hàm doPrint () trong lớp cha - PrinterClass.

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

doPrint() from Parent called. 
doPrint() is printing a string.