Lớp kế thừa nodejs

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

2. 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 gioiTinh1 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 gioiTinh2 và truyền vào danh sách tham số là thuộc tính của lớp

Sau đó gán các thuộc tính của lớp bằng từ khóa gioiTinh3

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ớp kế thừa nodejs


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

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

gioiTinh6

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 gioiTinh7

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ừ gioiTinh8 thành gioiTinh9

> 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 MSSV0 đị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 MSSV1 hoặc MSSV2. Mà phải gọi trực tiếp từ class của nó đó chính là MSSV3.

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 MSSV4


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 MSSV5 và một lớp SinhVien được kế thừa từ lớp MSSV5

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 MSSV8. 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 namSinh0

7. Từ khoá this trong lớp học


Về từ khóa namSinh1, 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

gioiTinh3 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 gioiTinh3 đượ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 namSinh4

Khi đoạn mã được biên dịch thì hàm namSinh5 được gọi, thì sử dụng con trỏ namSinh6 và namSinh7 trong hàm namSinh8 được hiểu là lớp namSinh9

8. Kiểm tra loại đối tượng với instanceof


hocBai0 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 hocBai1 là một thể hiện (đối tượng) của lớp MSSV5, vậy nên câu lệnh này phải trả về giá trị của hocBai3

Còn đối với hocBai4 là đối tượng trống, thì không phải là thể hiện của MSSV5 nên nó sẽ là hocBai6

hocBai0 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ề hocBai3 có nghĩa là hocBai1 vừa là thể hiện của SinhVien và cũng là thể hiện của MSSV5 (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