JavaScript dựa trên nguyên mẫu. Mỗi khi bạn khai báo một đối tượng, một thuộc tính nguyên mẫu sẽ được tạo ra để mở rộng các thuộc tính và phương thức được liên kết với đối tượng đó.
Trong vài năm qua, nhiều nhà phát triển JavaScript đã tìm cách kết hợp thiết kế hướng đối tượng vào mã của họ. Điều này đã làm phát sinh một loại đối tượng mới trong JavaScript được gọi là lớp, mở rộng một nguyên mẫu.
Trong hướng dẫn này, chúng ta sẽ thảo luận về các lớp là gì, tại sao chúng được sử dụng và cách bạn có thể triển khai một lớp trong mã của mình. Chúng tôi sẽ xem qua một ví dụ để giúp bạn bắt đầu với các lớp học.
Lớp JavaScript là gì?
Các lớp là một cách để khai báo một khuôn mẫu cho một đối tượng.
Nếu bạn đã quen thuộc với các ngôn ngữ lập trình hướng đối tượng, bạn sẽ biết rằng chúng phụ thuộc rất nhiều vào các lớp và đối tượng. Một lớp giống như một bản thiết kế cho một loại dữ liệu:nó cho biết dữ liệu nào có thể được lưu trữ và những phương thức nào nó có thể truy cập. Một đối tượng là một thể hiện của lớp đó.
Ví dụ về một lớp sẽ là Book . Lớp này sẽ chứa kế hoạch chi tiết về thông tin nào có thể được lưu trữ trên sách và cách dữ liệu đó có thể được thay đổi. Một đối tượng có thể là A Streetcar Named Desire, là một cuốn sách riêng lẻ.
Trong JavaScript, các lớp là những gì chúng ta gọi là đường cú pháp. Cú pháp lớp rất thú vị để có, nhưng chúng không nhất thiết phải thêm bất kỳ chức năng mới nào.
Các lớp thường được sử dụng trong các khung JavaScript hiện đại như React và Next.js.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Lớp so với Chức năng
Nếu bạn nhớ một điều từ bài viết này, hãy để nó như sau:các lớp chỉ là các hàm bình thường.
Sự khác biệt duy nhất giữa một lớp và một biểu thức hàm là cách chúng được khai báo; các hàm sử dụng hàm function từ khóa và các lớp sử dụng class từ khóa. Về mặt kỹ thuật, bạn có thể khai báo một lớp mà không cần sử dụng từ khóa lớp.
Chúng ta có thể nói rằng chúng giống nhau bằng cách tạo ra hai hàm và in ra nguyên mẫu của chúng:
const PlayerFunction = function() {}
const PlayerClass = class {}
console.log(Object.getPrototypeOf(PlayerFunction));
console.log(Object.getPrototypeOf(PlayerClass));
Biểu thức lớp và hàm trả về:
function ()
chức năng ()
Cả các hàm và lớp của chúng tôi đều sử dụng cùng một kiến trúc dựa trên nguyên mẫu.
Cách xác định lớp
Làm thế nào để bạn xác định một lớp? Đó là một câu hỏi tuyệt vời.
Bạn có thể xác định một lớp bằng cách sử dụng class từ khóa. Khi bạn đã xác định một lớp, bạn có thể sử dụng hàm constructor () để khởi tạo nó với một số giá trị mặc định.
Mở bảng điều khiển JavaScript và dán mã này vào:
class Book {
constructor(title, author) {
this.title = title;
this.author = author;
}
}
Điều này tạo ra một lớp có tên là Book . Lớp của chúng ta có thể lưu trữ hai giá trị, tiêu đề và tác giả, mà chúng ta đã xác định trong phương thức khởi tạo lớp của mình. Để tạo một đối tượng của lớp này, chúng ta có thể sử dụng mã này:
var streetcar = new Book("A Streetcar Named Desire", "Tennessee Williams");
Chúng ta có thể truy xuất các giá trị từ lớp của mình giống như chúng ta làm từ bất kỳ đối tượng nào:
console.log(streetcar.title);
Mã của chúng tôi trả về:Xe điện Có tên Mong muốn.
Cách xác định phương thức lớp
Một trong những lợi ích của việc sử dụng các lớp trên các nguyên mẫu là bạn có thể khai báo một phương thức bên trong một lớp. Điều này có nghĩa là bạn không cần sử dụng prototype cú pháp để thêm một phương thức mới vào một hàm hiện có.
Hãy xem xét ví dụ này:
class Book {
constructor(title, author) {
this.title = title;
this.author = author;
}
getDetails() {
console.log(`${this.title} is a book written by ${this.author}.`);
}
}
Chúng tôi đã khai báo một phương thức có tên là getDetails() tồn tại bên trong lớp của chúng ta. Điều này thật tuyệt vì nó giữ cho tất cả mã của chúng ta được nhóm lại với nhau. Hãy gọi cho getDetails() của chúng tôi chức năng:
var streetcar = new Book("A Streetcar Named Desire", "Tennessee Williams");
streetcar.getDetails();
Mã của chúng tôi trả về:
A Streetcar Named Desire là một cuốn sách được viết bởi Tennessee Williams.
Các lớp kế thừa
Giống như trong bất kỳ cấu trúc hướng đối tượng nào, các lớp có thể kế thừa các thuộc tính từ các lớp khác.
Kế thừa đề cập đến một quá trình mà một lớp con có thể truy cập các phương thức và dữ liệu từ một lớp cha. Để kế thừa một lớp, bạn có thể sử dụng extends từ khóa. Tạo tệp JavaScript hoặc mở bảng điều khiển JavaScript của bạn và dán vào mã này:
class Fiction extends Book {
constructor(title, author, fiction) {
super(title, author);
this.fiction = true;
}
}
Chúng tôi đã tạo một lớp có tên là Fiction sử dụng lớp Sách mà chúng tôi đã khai báo trước đó làm bản thiết kế. Trong mã của chúng tôi, chúng tôi đã sử dụng super() từ khóa để kế thừa các giá trị title và author từ lớp cha, đó là Book. Sau đó, chúng tôi đã xác định một thuộc tính mới, fiction , có giá trị được đặt thành true theo mặc định.
Hãy tạo một đối tượng của lớp Fiction mới của chúng ta:
var gatsby = new Fiction("The Great Gatsby", "F. Scott Fitzgerald");
console.log(gatsby.fiction);
Mã của chúng tôi trả về:true. Lớp Fiction lưu trữ một vật phẩm được gọi là fiction điều này đúng theo mặc định. Nếu chúng tôi cố gắng truy cập giá trị này từ một phiên bản của lớp Sách, sẽ không có gì được trả lại. Đó là vì "hư cấu" chỉ có thể truy cập được trong lớp Sách hư cấu của chúng tôi.
Người nhận và người định cư
Khi làm việc với các lớp, bạn nên sử dụng các hàm getter và setter.
Các hàm Getter cho phép bạn truy xuất các phương thức từ một lớp. Hàm setter cho phép bạn thay đổi giá trị của một mục cụ thể trong một lớp. Các hàm này được biểu thị bằng get và set từ khóa, tương ứng.
Hãy xem xét đoạn mã sau:
class Book {
constructor(title, author) {
this.title = title;
this.author = author;
}
get author() {
return this.author;
}
set author(author) {
this.author = author;
}
}
Trong ví dụ này, chúng tôi đã khai báo hai phương thức có tên là author . Một trong những phương pháp này cho phép chúng tôi truy xuất giá trị của author; đó là get của chúng tôi phương pháp. Phương pháp khác cho phép chúng tôi thay đổi giá trị của author .
Chúng ta có thể thấy điều này đang hoạt động bằng cách sử dụng mã sau:
var streetcar = new Book("A Streetcar Named Desire", "");
streetcar.author = "Tennessee Williams";
console.log(streetcar.author);
Mã của chúng tôi trả về:Tennessee Williams.
Chúng tôi đã khởi tạo một đối tượng có tên là streetcar và đặt cho nó danh hiệu A Streetcar Named Desire . Sau đó, chúng tôi đặt giá trị của author tới Tennessee Williams bằng cách sử dụng setter mà chúng tôi đã xác định trong mã của mình. Cuối cùng, chúng tôi in ra giá trị của author vào bảng điều khiển bằng phương thức getter.
Kết luận
Mặc dù các lớp không thêm bất kỳ chức năng mới nào vào JavaScript, nhưng chúng làm cho việc viết các hàm dễ hiểu hơn nếu bạn đã quen với lập trình hướng đối tượng.
Các lớp trừu tượng hóa thiết kế dựa trên nguyên mẫu của JavaScript và làm cho nó có vẻ hướng đối tượng hơn. Từ "dường như" là rất quan trọng bởi vì, hãy nhớ rằng, các lớp là các hàm. Các lớp không có gì khác hơn là đường cú pháp.
Bây giờ bạn đã sẵn sàng để bắt đầu sử dụng các lớp học như một chuyên gia JavaScript!