Tìm hiểu cách tạo lớp học trong JavaScript

Tìm hiểu cách tạo lớp học trong JavaScript

Vào năm 2015, phiên bản ES6 của ngôn ngữ lập trình JavaScript đã được phát hành. Bản phát hành này đã giới thiệu một số nâng cấp lớn cho ngôn ngữ và chính thức xếp nó vào danh mục ngôn ngữ lập trình hướng đối tượng trong số các ngôn ngữ khác như Java và C ++.





Lập trình hướng đối tượng tập trung vào các đối tượng và các hoạt động có thể được thực hiện trên chúng. Tuy nhiên, trước khi bạn có thể có bất kỳ đối tượng nào, bạn cần phải có một lớp.





tải phim miễn phí cho ipad để xem offline

Các lớp JavaScript là một trong những tính năng thay đổi trò chơi đi kèm với phiên bản ES6 của ngôn ngữ. Một lớp có thể được mô tả như một bản thiết kế được sử dụng để tạo các đối tượng.





Trong bài viết hướng dẫn này, bạn sẽ học cách tạo và thao tác các đối tượng bằng cách sử dụng các lớp JavaScript.

Cấu trúc lớp JavaScript

Khi tạo một lớp trong JavaScript, có một thành phần cơ bản mà bạn sẽ luôn yêu cầu — lớp từ khóa. Hầu hết mọi khía cạnh khác của lớp JavaScript đều không cần thiết để thực thi thành công.



Một lớp JavaScript sẽ thực thi một cách tự nhiên nếu một phương thức khởi tạo không được cung cấp (lớp này sẽ chỉ tạo một phương thức khởi tạo trống trong khi thực thi). Tuy nhiên, nếu một lớp JavaScript được tạo bằng các hàm tạo và các hàm khác nhưng không có từ khóa lớp nào được sử dụng, thì lớp này sẽ không thể thực thi được.

Các lớp từ khóa (luôn phải ở dạng chữ thường) là điều cần thiết trong cấu trúc lớp của JavaScript. Ví dụ sau đây là cú pháp chung của một lớp JavaScript. Cú pháp lớp JavaScript bên dưới:





class ClassName{
//class body
}

Tạo một lớp trong JavaScript

Trong lập trình, một lớp có thể được xem như một thực thể tổng quát được sử dụng để tạo ra một đối tượng chuyên biệt. Ví dụ, trong môi trường học đường, một thực thể khái quát (một lớp học) có thể là học sinh và một đối tượng là học sinh có thể là John Brown. Nhưng trước khi tạo một đối tượng, bạn cần biết dữ liệu mà nó sẽ lưu trữ và đây là lúc JavaScript Constructors phát huy tác dụng.

Sử dụng hàm tạo trong các lớp JavaScript

Một hàm tạo rất quan trọng đối với quá trình tạo lớp vì một vài lý do; nó khởi tạo trạng thái của một đối tượng (thông qua các thuộc tính của nó) và nó được gọi tự động khi một đối tượng mới được khởi tạo (định nghĩa và tạo).





Sử dụng một ví dụ về hàm tạo

Dưới đây, bạn sẽ thấy một ví dụ về hàm tạo với giải thích ý nghĩa của nó.

class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
}

Đoạn mã trên trình bày một khía cạnh quan trọng của hàm tạo lớp JavaScript; không giống như các ngôn ngữ khác như Java và C ++, trình tạo của JavaScript không sử dụng tên lớp để tạo trình tạo. Nó sử dụng người xây dựng từ khóa như bạn có thể thấy trong ví dụ trên.

Có liên quan: Tìm hiểu cách tạo lớp học trong Java

Các người xây dựng trong ví dụ trên lấy ba tham số và sử dụng cái này từ khóa để gán các tham số cho thể hiện hiện tại của lớp. Nó có vẻ hơi khó hiểu, nhưng những gì bạn cần hiểu là một lớp có thể được xem như một bản thiết kế được sử dụng để tạo ra nhiều ngôi nhà.

Mỗi ngôi nhà được xây dựng sau đó có thể được xem như một đối tượng của lớp này. Mặc dù mỗi ngôi nhà này được tạo ra với cùng một bản thiết kế, chúng có thể phân biệt được bằng vị trí địa lý cụ thể hoặc người sở hữu chúng.

Các cái này từ khóa được sử dụng để phân biệt từng đối tượng được tạo bởi một lớp. Nó đảm bảo rằng dữ liệu chính xác được lưu trữ và xử lý cho mỗi đối tượng được tạo bằng cách sử dụng cùng một lớp.

Tạo một đối tượng trong JavaScript

Các hàm tạo rất quan trọng trong một ngôn ngữ như JavaScript vì chúng biểu thị số lượng thuộc tính mà một đối tượng của một lớp cụ thể phải có. Một số ngôn ngữ sẽ yêu cầu một thuộc tính (biến) phải được khai báo trước khi nó có thể được sử dụng trong một phương thức khởi tạo hoặc bất kỳ phương thức nào khác. Tuy nhiên, đây không phải là trường hợp của JavaScript.

Liên quan: Cách khai báo các biến trong JavaScript

Nhìn vào hàm tạo lớp sinh viên ở trên, bạn có thể phân biệt rằng một đối tượng của lớp này sẽ có ba thuộc tính.

Tạo một ví dụ đối tượng

Dưới đây, bạn sẽ thấy một ví dụ để tạo một đối tượng trong JavaScript.

//create a new object
const john = new Student('John', 'Brown', '2018');

Đoạn mã trên sử dụng Sinh viên lớp để tạo một đối tượng.

Khi tạo một đối tượng của một lớp, bạn cần sử dụng Mới từ khóa, theo sau là tên lớp và các giá trị mà bạn muốn gán cho các thuộc tính tương ứng. Bây giờ bạn có một học sinh mới với tên John, họ Brown và ngày khai giảng năm 2018. Bạn cũng có một biến không đổi: John. Biến này rất quan trọng vì nó cho phép bạn sử dụng đối tượng được tạo.

Không có John biến, bạn vẫn có thể tạo một đối tượng mới bằng cách sử dụng Sinh viên lớp, nhưng sau đó sẽ không có cách nào để truy cập đối tượng này và sử dụng nó với các phương thức khác nhau của lớp.

Sử dụng các phương thức trong các lớp JavaScript

Phương thức là một hàm của một lớp được sử dụng để thực hiện các hoạt động trên các đối tượng được tạo ra từ lớp đó. Một phương pháp tốt để thêm vào lớp học sinh là một phương pháp tạo báo cáo về mỗi học sinh.

Ví dụ về tạo phương thức lớp

Dưới đây là một ví dụ để tạo các phương thức lớp trong JavaScript.

class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
}

Lớp ở trên chứa một phương thức sẽ tạo báo cáo về mỗi học sinh được tạo bằng Sinh viên lớp. Để sử dụng bản báo cáo() bạn sẽ cần sử dụng một đối tượng hiện có của lớp để thực hiện một cuộc gọi hàm đơn giản.

Nhờ ví dụ tạo đối tượng ở trên, bạn sẽ có một đối tượng của Sinh viên lớp được gán cho biến John . Sử dụng John , bây giờ bạn có thể gọi thành công bản báo cáo() phương pháp.

Ví dụ về sử dụng phương thức lớp

Dưới đây là một ví dụ về việc sử dụng các phương thức lớp trong JavaScript.

//create a new object
const john = new Student('John', 'Brown', '2018');
//calling the report method and storing its result in a variable
let result = john.report();
//printing the result to the console
console.log(result);

Đoạn mã trên sử dụng Sinh viên lớp để tạo ra kết quả sau trong bảng điều khiển:

John Brown started attending this institution in 2018

Sử dụng các phương thức tĩnh trong các lớp JavaScript

Phương thức tĩnh là duy nhất vì chúng là phương thức duy nhất trong một lớp JavaScript có thể được sử dụng mà không có đối tượng.

Từ ví dụ trên, bạn không thể sử dụng bản báo cáo() phương thức không có đối tượng của lớp. Điều này là bởi vì bản báo cáo() phương thức dựa vào các thuộc tính của một đối tượng để tạo ra một kết quả mong muốn. Tuy nhiên, để sử dụng một phương thức tĩnh, bạn sẽ chỉ cần tên của lớp lưu trữ phương thức.

Tạo một ví dụ về phương pháp tĩnh

Dưới đây là một ví dụ về phương pháp tĩnh cho JavaScript.

class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
//static method
static endDate(startDate){
return startDate + 4;
}
}

Điều quan trọng cần lưu ý từ ví dụ trên là mọi phương thức tĩnh đều bắt đầu bằng tĩnh từ khóa.

Sử dụng một ví dụ về phương pháp tĩnh

Dưới đây là một ví dụ để sử dụng một phương thức tĩnh trong JavaScript.

//calling a static method and printing its result to the console
console.log(Student.endDate(2018));

Dòng mã trên sử dụng Sinh viên lớp để tạo ra kết quả sau trong bảng điều khiển:

2022

Tạo một lớp JavaScript thật dễ dàng

Có một số điều bạn cần nhớ nếu bạn muốn tạo một lớp JavaScript và khởi tạo một hoặc nhiều đối tượng từ nó:

  • Một lớp JavaScript phải có lớp từ khóa.
  • Một hàm tạo JavaScript cho biết số lượng giá trị mà một đối tượng có thể có.
  • Không thể sử dụng các phương thức chung của lớp nếu không có đối tượng.
  • Phương thức tĩnh có thể được sử dụng mà không cần đối tượng.

Các bàn điều khiển . log () phương thức được sử dụng trong suốt bài viết này để cung cấp kết quả của việc sử dụng cả phương thức chung và phương thức tĩnh trong một lớp JavaScript. Phương pháp này là một công cụ hữu ích cho bất kỳ nhà phát triển JavaScript nào vì nó giúp ích trong quá trình gỡ lỗi.

Làm quen với console.log () phương pháp là một trong những điều quan trọng nhất bạn có thể làm với tư cách là một nhà phát triển JavaScript.

Đăng lại Đăng lại tiếng riu ríu E-mail Bảng gian lận JavaScript cuối cùng

Cập nhật nhanh các phần tử JavaScript với bảng gian lận này.

Đọc tiếp
Chủ đề liên quan
  • Lập trình
  • Lập trình
  • JavaScript
  • Mẹo mã hóa
  • Hướng dẫn viết mã
Giới thiệu về tác giả Kadeisha Kean(21 bài báo đã xuất bản)

Kadeisha Kean là Nhà phát triển Phần mềm Full-Stack và Người viết Kỹ thuật / Công nghệ. Cô ấy có khả năng khác biệt để đơn giản hóa một số khái niệm công nghệ phức tạp nhất; sản xuất vật liệu có thể dễ dàng hiểu được bởi bất kỳ người mới làm quen với công nghệ. Cô ấy đam mê viết lách, phát triển phần mềm thú vị và đi khắp thế giới (thông qua phim tài liệu).

Xem thêm từ Kadeisha Kean

Theo dõi bản tin của chúng tôi

Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!

Bấm vào đây để đăng ký