ES6 – Classes, Object Orientation là 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 là một tập hợp các đối tượng

Bạn đang xem: es6 lớp phương thức tĩnh

ES6 – Lớp

Quảng cáo

Hướng đối tượng là một mô hình phát triển phần mềm tuân 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ế gọi là phương thức. ES6 cũng hỗ trợ các thành phần hướng đối tượng này.

Khái niệm lập trình hướng đối tượng

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

  • Đối tượng – Đố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 –

    • Trạng thái – Được mô tả bằng các thuộc tính của một đối tượng.

    • Hành vi – Mô tả cách đối tượng sẽ hành động.

    • Danh tính – 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.

  • Lớp – Một lớp theo 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.

  • Phương pháp – Các 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 ô tô 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 một lớp là một công việc cầu kỳ. Có thể tạo lớp 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 số nhận dạng (đã được thảo luận) phải được xem xét 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 –

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

  • Hàm – Các hàm biểu thị 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.

Những 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.

Lưu ý – 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

Đa giác lớp {
   hàm tạo (chiều cao, chiều rộng) {
      this.height = chiều cao;
      this.width = width;
   }
}

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

var Polygon = class {
   hàm tạo (chiều cao, chiều rộng) {
      this.height = chiều cao;
      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 {
   hàm tạo (chiều cao, chiều rộng) {
      this.height = chiều cao;
      this.width = width;
   }
}

Lưu ý – Không giống như các biến và hàm, không thể lưu các lớp.

Tạo đối tượng

Để tạo một phiên bả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 ([đối số])

Ở đâu,

  • Từ khoá mới chịu trách nhiệm về việc 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 chuyể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)

Các chức năng truy cập

Các thuộc tính và chức năng của lớp có thể được truy cập thông qua đối tượng. Sử dụng ký hiệu dấu chấm ‘.’ (đượ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.

// truy cập một hàm
obj. function_name ()

Ví dụ: Ghép chúng lại với nhau

'Sử dụng nghiêm ngặt'
Đa giác lớp {
   hàm tạo (chiều cao, chiều rộng) {
      this.h = chiều cao;
      this.w = chiều rộng;
   }
   kiểm tra() {
      console.log ("Chiều cao của đa giác:", this.h)
      console.log ("Chiều rộng của đa giác:", this. w)
   }
}

// tạo một phiên bản
var polyObj = new Polygon (10,20);
polyObj.test ();

Ví dụ được đưa ra ở trên khai báo một lớp ‘Đa giác’. Phương thức khởi tạo của lớp nhận hai đối số – chiều cao và chiều rộng tương ứng. Từ khóa ‘this’ đề 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. Hàm test () trong lớp, in ra các giá trị của chiều cao và chiều rộng.

Xem Thêm  Mã màu HTML # FFD700 (Vàng) - mã màu html vàng

Để làm cho tập lệnh hoạt động, một đối tượng của lớp Polygon được tạo. Đối tượng được tham chiếu bởi biến polyObj . 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.

Chiều cao của đa giác: 10
Chiều rộng của đa giác: 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ó nỗ lực đặt giá trị của một thuộc tính. Từ khóa set được sử dụng để xác định một hàm setter. Cú pháp để xác định hàm setter được đưa ra dưới đây –

{set prop (val) {. . . }}
{set [biểu thức] (val) {. . . }}

prop là tên của thuộc tính để liên kết với hàm đã cho. val là bí danh của biến chứa giá trị được cố gắng gán cho thuộc tính. biểu thức 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.

Ví dụ

& lt; script & gt;
   sinh viên lớp {
      hàm tạo (rno, fname, lname) {
         this.rno = rno
         this.fname = fname
         this.lname = lname
         console.log ('bên trong hàm tạo')
      }
      đặt rollno (newRollno) {
         console.log ("bên trong setter")
         this.rno = newRollno
      }
   }
   let s1 = new Student (101, 'Sachin', 'Tendulkar')
   console.log (s1)
   // setter được gọi
   s1.rollno = 201
   console.log (s1)
& lt; / script & gt;

Ví dụ trên định nghĩa một lớp Sinh viên có ba thuộc tính rno, fname và lname . Hàm setter rollno () đượ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 –

hàm tạo bên trong
Sinh viên {rno: 101, fname: "Sachin", lname: "Tendulkar"}
người định cư bên trong
Sinh viên {rno: 201, fname: "Sachin", lname: "Tendulkar"}

Ví dụ

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

& lt; script & gt;
   let expr = 'name';
      hãy để obj = {
      fname: 'Sachin',
      set [expr] (v) {this.fname = v; }
   };
   console.log (obj.fname);
   obj.name = 'John';
   console.log (obj.fname);
& lt; / script & gt;

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

Sachin
John

Người nhận

Hàm getter được gọi khi có nỗ lực tìm nạp giá trị của một thuộc tính. Từ khóa get đượ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 [biểu thức] () {...}}

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

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

Ví dụ

& lt; script & gt;
   sinh viên lớp {
      hàm tạo (rno, fname, lname) {
         this.rno = rno
         this.fname = fname
         this.lname = lname
         console.log ('bên trong hàm tạo')
      }
      lấy fullName () {
         console.log ('inside getter')
         trả về this.fname + "-" + this.lname
      }
   }
   let s1 = new Student (101, 'Sachin', 'Tendulkar')
   console.log (s1)
   // getter được gọi là
   console.log (s1.fullName)
& lt; / script & gt;

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

Xem Thêm  Bộ chọn lớp CSS - bộ chọn css theo tên lớp

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

hàm tạo bên trong
Sinh viên {rno: 101, fname: "Sachin", lname: "Tendulkar"}
bên trong getter
Sachin - Tendulkar

Ví dụ

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

& lt; script & gt;
   let expr = 'name';
   hãy để obj = {
      get [expr] () {return 'Sachin'; }
   };
   console.log (obj.name);
& lt; / script & gt;

Đầ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.

Ví dụ

'Sử dụng nghiêm ngặt'
lớp StaticMem {
   static disp () {
      console.log ("Hàm tĩnh được gọi là")
   }
}
StaticMem.disp () // gọi đến metho tĩnh

Lưu ý – Không bắt buộc phải bao gồm định nghĩa hàm tạo. Theo mặc định, mỗi lớp đều có một hàm tạo.

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

Hàm tĩnh được gọi là

Toán tử instanceof

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

Ví dụ

'Sử dụng nghiêm ngặt'
Người trong lớp {}
var obj = new Person ()
var isPerson = obj instanceof Person;
console.log ("obj là một thể hiện của 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 là một ví dụ của Person True

Kế thừa giai cấp

ES6 hỗ trợ khái niệm Kế thừa . Tính kế thừa là khả năng chương trình tạo ra 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à lớp cha / siêu lớp . Các lớp mới tạo được gọi là lớp con / lớp con .

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 mở rộng parent_class_name

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

'Sử dụng nghiêm ngặt'
Hình dạng lớp {
   hàm tạo (a) {
      this.Area = a
   }
}
lớp Vòng tròn mở rộng Hình dạng {
   disp () {
      console.log ("Diện tích hình tròn:" + 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ối quan hệ kế thừa giữa các lớp, tức là lớp con, lớp Circle có quyền truy cập ngầm vào thuộc tính lớp cha của nó, tức là vùng.

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

Diện tích hình tròn: 223

Tài sản thừa kế có thể được phân loại là –

  • Đơn – Mỗi lớp có thể mở rộng tối đa từ một lớp cha.

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

  • Đa cấp – Hãy xem xét ví dụ sau.

'Sử dụng nghiêm ngặt'
Gốc lớp {
   kiểm tra() {
      console.log ("cuộc gọi từ lớp cha")
   }
}
lớp Con mở rộng Gốc {}
lớp Lá kéo dài Con

// kế thừa gián tiếp từ Root do kế thừa {}
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.

cuộc gọi từ lớp cha

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

Ghi đè phương thức là 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 điều tương tự –

'Sử dụng nghiêm ngặt' ;
class PrinterClass {
   doPrint () {
      console.log ("doPrint () từ Parent được gọi là…");
   }
}
class StringPrinter mở rộng PrinterClass {
   doPrint () {
      console.log ("doPrint () đang in một chuỗi…");
   }
}
var obj = new StringPrinter ();
obj.doPrint ();

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

Xem Thêm  Cách tạo siêu liên kết trong HTML - html làm thế nào để siêu liên kết

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

doPrint () đang in một chuỗi…

Super Keyword

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ụng từ khoá siêu . 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 –

'Sử dụng nghiêm ngặt'
class PrinterClass {
   doPrint () {
      console.log ("doPrint () từ Parent được gọi là…")
   }
}
class StringPrinter mở rộng PrinterClass {
   doPrint () {
      super.doPrint ()
      console.log ("doPrint () đang in một chuỗi…")
   }
}
var obj = new StringPrinter ()
obj.doPrint ()

Định nghĩa lại doPrint () trong lớp StringWriter, đưa ra lệnh gọi đến phiên bản lớp mẹ 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 () từ Parent được gọi.
doPrint () đang in một chuỗi.

Quảng cáo


Xem thêm những thông tin liên quan đến chủ đề các phương thức tĩnh của các lớp es6

JavaScript ES6 – Classes

  • Tác giả: Nodecasts
  • Ngày đăng: 2016-03-30
  • Đánh giá: 4 ⭐ ( 1815 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This video gives a high level overview of JavaScript classes in ES6. It shows constructors, inheritance, static methods and more!

cách xác định thuộc tính tĩnh trong các lớp ES6

  • Tác giả: vi.moms4more.org
  • Đánh giá: 4 ⭐ ( 4687 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi muốn có một thuộc tính tĩnh trong một lớp ES6. Giá trị thuộc tính này ban đầu là một mảng trống. class Game {constructor () {// this.cards = []; }

Classes trong ES6

  • Tác giả: toidicode.com
  • Đánh giá: 5 ⭐ ( 8588 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ES6 đã hỗ trợ chúng ta rất mạnh về class đúng không mọi người? Cho đến thời điểm hiện tại thì thì nó đã hỗ trợ hầu hết các trình duyệt web rồi chỉ có IE, Opera và android browser là chưa hỗ trợ thôi, nên mọi người cũng cần phải cân nhắc khi sử dụng.

Series về ES6: Class

  • Tác giả: blog.haposoft.com
  • Đánh giá: 5 ⭐ ( 1825 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Khai báo hằng số tĩnh trong các lớp ES6?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 2708 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Dưới đây là một vài điều bạn có thể làm: Xuất a consttừ mô-đun . Tùy…

Tổng hợp kiến thức ES6

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 3340 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: – 1. let, const và block scoping – 2. Arrow Functions – 3. Default Function Parameters – 4. Spread / Rest Operator – 5. Object Literal Extensions – 6. Octal và Binary Literals – 7. Array và Object Des…

ES6: cái này trong phương thức tĩnh

  • Tác giả: vi.waldorf-am-see.org
  • Đánh giá: 5 ⭐ ( 1908 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giả sử tôi có hai lớp ES6 như thế này: class Base {static something () {console.log (this); }} class Derived Extended Base {} Và sau đó tôi thực hiện một cuộc gọi như sau: Derived.som …

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php