Trong thiết lập lớp hướng đối tượng [hay lớp] được sử dụng để tạo ra các đối tượng [mà mình đã giới thiệu ở bài đối tượng trong JavaScript]
Đối tượng thì sẽ có các thuộc tính, phương thức
Các đối tượng giống nhau sẽ có thuộc tính và phương thức giống nhau
Từ phiên bản ECMAScript 6 thì JavaSript hỗ trợ tạo ra lớp giống các ngôn ngữ lập trình hướng đối tượng khác [Java, PHP, Python. ]
Có thể xem như việc sử dụng class và object sẽ giúp chúng ta có cái nhìn chuẩn hơn về code và để những bạn mới tiếp cận lập trình JavaSript cũng thấy gần gũi hơn
Cú pháp để tạo ra một lớp trong JavaScript
Đây là ví dụ khi khai báo Object mà mình đã giới thiệu ở bài trước
bảng điều khiển. log['Đang học bài. '];
bảng điều khiển. log['Đang ngủ. '];
bảng điều khiển. log['Dang xem phim. '];
Nhưng ở đây, ta chỉ tạo được một đối tượng cụ thể
Nếu muốn tạo đối tượng khác thì ta phải viết lại mã gần như từ đầu
Nếu các đối tượng sinh viên được tạo ra cũng có các thuộc tính giống nhau như. hoTen
, gioiTinh
, MSSV
, namSinh
Và các thuộc tính chung như hocBai
, diNgu
, xemPhim
Thì có nghĩa là code của bạn chưa tối ưu
Code thừa rất nhiều
Để tránh vấn đề này, chúng ta có lớp
// Tạo ra một lớp SinhVien
constructor[hoTen, gioiTinh, MSSV, namSinh] {
bảng điều khiển. log['Đang học bài. '];
bảng điều khiển. log['Đang ngủ. '];
bảng điều khiển. log['Dang xem phim. '];
Có thể hiểu đây là một khuôn mẫu chung cho các đối tượng sinh viên
Khi muốn tạo các đối tượng cụ thể, ta sẽ sử dụng lớp SinhVien
này
// Tạo đối đối tượng từ lớp SinhVien
var sinhVien1 = new SinhVien[];
var sinhVien2 = new SinhVien[];
var sinhVien3 = new SinhVien[];
> Lưu ý. Theo quy tắc thì bạn nên đặt tên lớp là viết HOA chữ cái đầu tiên như
SinhVien
, GiangVien
, gioiTinh
02. Constructor là gì?
Phương thức khởi tạo [constructor hay là hàm khởi tạo] là một phương thức đặc biệt để tạo và khởi tạo một đối tượng từ một lớp nào đó
Nó sẽ tự động được gọi khi bạn tạo một đối tượng từ lớp
Chỉ có thể có một phương thức đặc biệt với tên là “hàm tạo” trong một lớp
Một lỗi gioiTinh
1 sẽ được đưa ra nếu lớp có nhiều hơn một lần xuất hiện của một phương thức khởi tạo
Tức là JavaScript không hỗ trợ có nhiều hàm tạo như các ngôn ngữ khác
Một ví dụ về constructor
constructor[hoTen, gioiTinh, MSSV, namSinh] {
Như vậy để tạo hàm tạo hàm thì chỉ cần sử dụng từ khóa
gioiTinh
2 và truyền vào danh sách tham số là thuộc tính của lớpSau đó gán các thuộc tính của lớp bằng từ khóa gioiTinh
3
Bạn nhìn như thế này sẽ dễ hiểu hơn
Sau đó khi khởi tạo đối tượng, ta sẽ truyền đối số như thế này
var sinhVien1 = new SinhVien[a, b, c, d];
Tuy nhiên, để sau này dễ dàng biết thuộc tính nào kết nối với tham số nào thì chúng ta nên sử dụng tên tham số và đối số trong hàm tạo hàm giống nhau
constructor[hoTen, gioiTinh, MSSV, namSinh] {
> Ghi chú. Khi tạo lớp thì ta gọi là tham số. Khi khởi động và truyền dữ liệu, ta gọi nó là đối số
Chúng ta có nhiều cách gọi hàm như trong bài hàm mình có đề cập đến
Ví dụ như sau
// Khởi tạo các đối tượng sinh viên
var sinhVien1 = new SinhVien["Ngô Minh Trung", "Nam", "B1704863", "1999"];
var sinhVien2 = new SinhVien["Nguyễn Minh Đức", "Nam"];
var sinhVien3 = new SinhVien[];
// Log ra thông tin đối tượng
Kết quả ta được như sau
> Lưu ý: Kể cả khi bạn không định nghĩa rõ ràng một constructor. JavaScript cũng sẽ tự động thêm vào một constructor rỗng
3. Phương thức getter và setter trong JavaScript
Các phương thức getter và setter được sử dụng để truy cập / sửa đổi các thuộc tính trong lớp
Có thể hiểu là một loại hàm để lấy dữ liệu và một loại hàm dùng để gán dữ liệu
3. 1. Phương thức getter
Các phương thức getter được sử dụng để truy cập các thuộc tính của một đối tượng
Để tạo phương thức getter trong JavaScript, chúng ta sử dụng từ khóa gioiTinh
4
Ví dụ
// Trình nhận phương thức biểu thức
Có bao nhiêu thuộc tính thì sẽ có nhiều function getter trong class
Khi chúng tôi sử dụng, chúng tôi có thể truy cập giá trị như một thuộc tính
Ví dụ
var sinhVien1 = new SinhVien["Ngô Minh Trung", "Nam", "B1704863", "1999"];
// Truy cập giới tính thông thông qua phương thức getter
bảng điều khiển. log[sinhVien1. getGioiTinh];
Ngay cả khi getter là một phương thức, nếu bạn cố gắng truy cập giá trị dưới dạng một phương thức [sử dụng trích xuất vòng 15 ] như thế này
bảng điều khiển. log[sinhVien1. getGioiTinh[]];
Thì sẽ bị lỗi
gioiTinh
6
3. 2. Phương thức setter
Phương thức setter cho phép bạn thay đổi giá trị thuộc tính của đối tượng
Để tạo phương thức setter ta sử dụng từ khóa gioiTinh
7
Ví dụ
set setGioiTinh[gioiTinh] {
Getter, setter tương tự cũng có bao nhiêu thuộc tính thì chúng ta tạo ra setter hàm nhiều phần tử
Để sử dụng trình thiết lập phương thức, bạn phải truyền vào các đối số tương ứng
var sinhVien1 = new SinhVien["Ngô Minh Trung", "Nam", "B1704863", "1999"];
// Thiết lập lại giới tính
sinhVien1. setGioiTinh = "Nữ";
// Log ra giới hạn tính hiện tại
bảng điều khiển. log[sinhVien1. getGioiTinh];
Hiện tại, giới tính đã thay đổi từ
gioiTinh
8 thành gioiTinh
9> Lưu ý #1. JavaScript không hỗ trợ đầy đủ tính năng đóng gói trong Lập trình hướng đối tượng như Java, PHP hay Python. Vì thế, mọi thuộc tính đều có thể truy cập nếu bạn biết tên của thuộc tính đó [Giống như phạm vi truy cập công khai trong Java, tham khảo trong hướng dẫn. HỌC LẬP TRÌNH JAVA]
> Lưu ý #2. JavaScript nguyên bản thì không hỗ trợ private, protected nhưng bạn có thể mô phỏng chúng [Tuy nhiên sẽ hơi rắc rối đó]
4. Phương thức tĩnh [Static method]
Từ khóa MSSV
0 định nghĩa một phương thức tĩnh cho một lớp, còn được gọi là phương thức tĩnh
Các phương thức tĩnh được gọi mà không cần khởi tạo lớp của chúng và không thể gọi thông qua một đối tượng của lớp
Phương thức tĩnh thường được sử dụng để tạo các chức năng tiện ích cho một ứng dụng
Ví dụ
bảng điều khiển. nhật ký [Điểm. khoảng cách[p1, p2]]; . 0710678118654755
Chúng ta không thể gọi hàm distance thông qua
MSSV
1 hoặc MSSV
2. Mà phải gọi trực tiếp từ class của nó đó chính là MSSV
3.5. Hoisting đối với lớp
Không giống như các hàm và các khai báo JavaScript khác, các lớp khai báo [lớp] không được cẩu
var sinhVien1 = new SinhVien["Ngô Minh Trung"];
Ví dụ trên sẽ tạo ra lỗi
Để tránh lỗi, bạn phải khai báo một lớp trước khi bạn có thể sử dụng nó, như vậy
var sinhVien1 = new SinhVien["Ngô Minh Trung"];
6. Kế thừa lớp
JavaScript hỗ trợ tính kế thừa [kế thừa] như các ngôn ngữ khác, để tạo một lớp kế thừa, bạn cũng sử dụng từ khóa MSSV
4
class SinhVien extends ConNguoi {. }
Kế thừa cho chúng ta khả năng sử dụng lại mã đã viết
Sử dụng lại các thuộc tính và phương thức của một lớp có sẵn khi tạo một lớp mới giúp chúng ta tiết kiệm thời gian làm việc
Một lớp được kế thừa từ lớp cha sẽ có tất cả các tác động của phương thức từ lớp cha
Ví dụ. Ta có một lớp MSSV
5 và một lớp SinhVien
được kế thừa từ lớp MSSV
5
constructor[hoTen, namSinh] {
cái này. hoTen = hoTen. "không xác định";
cái này. namSinh = namSinh. "không xác định";
trả lại "Tên " + cái này. hoTen + ", sinh năm " + này. namSinh;
class SinhVien extends ConNguoi {
constructor[maSSV, hoTen, namSinh] {
cái này. maSSV = maSSV. "không xác định";
trả lại cái này. getHoTen[] + ", mã sinh viên " + this. maSSV;
var sinhVien1 = new SinhVien["B1704863", "Ngô Minh Trung", "1999"];
bảng điều khiển. log[sinhVien1. getThongTin[]];
Kết quả
Tên Ngô Minh Trung, sinh năm 1999, mã sinh viên B1704863
Qua đoạn mã trên ta thấy
- Xuất hiện từ khóa
MSSV
8. Phương thức super[] này là phương thức tham chiếu đến lớp cha. Khi chúng ta gọi phương thức super[] trong hàm khởi động thì chúng ta gọi đến phương thức khởi tạo của lớp cha và có quyền truy cập vào các thuộc tính và phương thức khởi tạo của lớp cha
- Chúng ta cũng có thể gọi phương thức của lớp cha thông qua từ khóa super[] khi chúng ta ghi đè lên phương thức đó
Ví dụ
constructor[hoTen, namSinh] {
cái này. hoTen = hoTen. "không xác định";
cái này. namSinh = namSinh. "không xác định";
trả lại "tên " + cái này. hoTen + ", sinh năm " + this. namSinh;
class SinhVien extends ConNguoi {
constructor[maSSV, hoTen, namSinh] {
cái này. maSSV = maSSV. "không xác định";
"MSSV " + cái này. maSSV + ", " + siêu. getThongTin[]
var sinhVien1 = new SinhVien["B1704863", "Ngô Minh Trung", "1999"];
bảng điều khiển. log[sinhVien1. getThongTin[]];
Kết quả được như sau
MSSV B1704863, tên Ngô Minh Trung, sinh năm 1999
Như vậy, ở class
SinhVien
mình đã ghi đè thành công phương thức namSinh
07. Từ khoá this trong lớp học
Về từ khóa namSinh
1, thông thường bạn sẽ thấy trong các ngôn ngữ lập trình hướng đối tượng khác, nó là một thể hiện cho đối tượng đang chứa đoạn mã đang được thực thi
gioiTinh
3 thường được chỉ đến Đối tượng chứa phương thức đang được gọi là thực thi
Từ khóa gioiTinh
3 được mình sử dụng ở các phần trước
constructor[hoTen, namSinh] {
cái này. hoTen = hoTen. "không xác định";
cái này. namSinh = namSinh. "không xác định";
trả lại "Tên " + cái này. hoTen + ", sinh năm " + này. namSinh;
Với lớp này mình sử dụng từ khóa
namSinh
4Khi đoạn mã được biên dịch thì hàm namSinh
5 được gọi, thì sử dụng con trỏ namSinh
6 và namSinh
7 trong hàm namSinh
8 được hiểu là lớp namSinh
9
8. Kiểm tra loại đối tượng với instanceof
hocBai
0 còn có tác dụng xác định xem các đối tượng phải là một thể hiện [đối tượng] của một lớp hay không
To mình ví dụ
constructor[hoTen, namSinh] {
cái này. hoTen = hoTen. "không xác định";
cái này. namSinh = namSinh. "không xác định";
trả lại "Tên " + cái này. hoTen + ", sinh năm " + này. namSinh;
var sinhVien1 = new ConNguoi["Ngô Minh Trung", "1999"];
bảng điều khiển. log[sinhVien1 instanceof ConNguoi];
bảng điều khiển. log[sinhVien2 instanceof ConNguoi];
Như vậy ta sẽ thấy rằng hocBai
1 là một thể hiện [đối tượng] của lớp MSSV
5, vậy nên câu lệnh này phải trả về giá trị của hocBai
3
Còn đối với hocBai
4 là đối tượng trống, thì không phải là thể hiện của MSSV
5 nên nó sẽ là hocBai
6
hocBai
0 but also could verify as a instance of the layer con must be the current of layer cha
Ví dụ
constructor[hoTen, namSinh] {
cái này. hoTen = hoTen. "không xác định";
cái này. namSinh = namSinh. "không xác định";
trả lại "Tên " + cái này. hoTen + ", sinh năm " + này. namSinh;
class SinhVien extends ConNguoi {
constructor[maSSV, hoTen, namSinh] {
cái này. maSSV = maSSV. "không xác định";
trả lại cái này. getHoTen[] + ", mã sinh viên " + this. maSSV;
var sinhVien1 = new SinhVien["B1704863", "Ngô Minh Trung", "1999"];
bảng điều khiển. log[sinhVien1 instanceof SinhVien];
bảng điều khiển. log[sinhVien1 instanceof ConNguoi];
Kết quả cả hai đều trả về
hocBai
3 có nghĩa là hocBai
1 vừa là thể hiện của SinhVien
và cũng là thể hiện của MSSV
5 [lớp cha của SinhVien
].9. Lớp và nguyên mẫu
Cú pháp lớp [lớp] trong JavaScript hiện thực hóa các đối tượng nguyên mẫu [nguyên mẫu] một cách tuyệt vời
Các lớp được xây dựng từ kế thừa các nguyên mẫu. Mọi lớp đều được xem như là một hàm và tạo ra một thể hiện khi được gọi là một hàm tạo
Chúng ta hãy so sánh hai đoạn mã sau nhé
Đoạn mã 1 sử dụng từ khoá class
constructor[hoTen, namSinh] {
cái này. hoTen = hoTen. "không xác định";
cái này. namSinh = namSinh. "không xác định";
trả lại "Tên " + cái này. hoTen + ", sinh năm " + này. namSinh;
var sinhVien1 = new ConNguoi["Ngô Minh Trung", 1999];
bảng điều khiển. log[sinhVien1. getThongTin[]];
bảng điều khiển. log[sinhVien1 instanceof ConNguoi];
Đoạn mã thứ 2 sử dụng nguyên mẫu [tương tự như tạo đối tượng ở bài trước]
function ConNguoi[hoTen, namSinh] {
cái này. hoTen = hoTen. "không xác định";
cái này. namSinh = namSinh. "không xác định";
ConNguoi. nguyên mẫu. getThongTin = function[] {
trả lại "Tên " + cái này. hoTen + ", năm sinh" + này. namSinh;
var sinhVien1 = new ConNguoi["Ngô Minh Trung", 1999];
bảng điều khiển. log[sinhVien1. getThongTin[]];
bảng điều khiển. log[sinhVien1 instanceof ConNguoi];
Đây là hai đoạn mã tương đương với nhau. Đối chiếu với từ khóa lớp sẽ dễ sử dụng hơn nếu bạn đã quen với cách thiết lập chương trình của ngôn ngữ Java hoặc C#
Nếu bạn thích sử dụng từ khóa class hơn thì các bạn cũng nên hiểu rõ về kế thừa nguyên mẫu nhé. Because in JavaScript prototype rất quan trọng
Tổng kết
MÌnh vừa giới thiệu các bạn về lớp học trong JavaSript đây chính là một điểm mới để tránh sự rà soát của Object trước đây, lớp tường minh hơn sẽ dễ dàng tiếp cận hơn
Ngoài ra, mình cũng đã giới thiệu các bạn về một số khái niệm khác liên quan đến lớp học trong JavaScript. Đây chỉ là một nền tảng mới cho các bạn học những thư viện hay framework của JavaScript về sau