Hướng dẫn javascript class this - lớp javascript này
Hôm nay mình sẽ giới thiệu với bạn về class trong JavaScript. Class được tạo ra như thế nào? Sử dụng class ra sao. Hãy theo dõi nhé!class trong JavaScript. Class được tạo ra như thế nào? Sử dụng class ra sao. Hãy theo dõi nhé! Show
1. Class là gì?Class có thể hiểu là một khuôn mẫu. có thể hiểu là một khuôn mẫu. Trong lập trình hướng đối tượng class (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).class (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ó những 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 class giống các ngôn ngữ lập trình hướng đối tượng khác (Java, PHP, Python...).ECMAScript 6 thì JavaSript hỗ trợ tạo ra class giống các ngôn ngữ lập trình hướng đối tượng khác (Java, PHP, Python...). Tham khảo:
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 class trong JavaSript: // Hàm khởi tạo constructor() { ... }() { ... } // Các phương thức phuongThuc1() { ... }() { ... } phuongThuc2() { ... }() { ... } phuongThuc3() { ... }() { ... } } } Đây là ví dụ khi khai báo Object mà mình đã giới thiệu ở bài trước: // Tạo các thuộc tính hoTen: 'Ngô Minh Trung',: 'Ngô Minh Trung', gioiTinh: 'Nam',: 'Nam', MSSV: 'B1704863',: 'B1704863', namSinh: '1999',: '1999', // Tạo các phương thức hocBai: function() { : function() { console.log('Đang học bài...');.log('Đang học bài...'); }, diNgu: function() {: function() { console.log('Đang ngủ...');.log('Đang ngủ...'); }, xemPhim: function() {: function() { console.log('Đang ngủ...');.log('Đang xem phim...'); } } Đây là ví dụ khi khai báo Object mà mình đã giới thiệu ở bài trước: // Tạo các thuộc tính hoTen: 'Ngô Minh Trung', // Tạo các phương thức hocBai: function() { console.log('Đang học bài...'); },class: console.log('Đang ngủ...'); class SinhVien { SinhVien { console.log('Đang xem phim...'); constructor(hoTen, gioiTinh, MSSV, namSinh) {(hoTen, gioiTinh, MSSV, namSinh) { this.hoTen = hoTen;.hoTen = hoTen; this.gioiTinh = gioiTinh;.gioiTinh = gioiTinh; this.namSinh = namSinh;.namSinh = namSinh; Nhưng ở đây, ta chỉ tạo được một đối tượng cụ thể..MSSV = MSSV; } } hocBai() {() { console.log('Đang học bài...');.log('Đang học bài...'); } diNgu() {() { console.log('Đang ngủ...');.log('Đang ngủ...'); } xemPhim() {() { console.log('Đang ngủ...');.log('Đang xem phim...'); } } Đây là ví dụ khi khai báo Object mà mình đã giới thiệu ở bài trước: // Tạo các thuộc tính hoTen: 'Ngô Minh Trung', var sinhVien1 = new SinhVien(); sinhVien1 = new SinhVien(); var sinhVien2 = new SinhVien(); sinhVien2 = new SinhVien(); // Tạo các phương thức sinhVien3 = new SinhVien(); hocBai: function() { Lưu ý: Theo quy tắc thì bạn nên đặt tên class là viết HOA chữ cái đầu tiên như console.log('Đang học bài...');}, (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 class nào đó. console.log('Đang ngủ...'); console.log('Đang xem phim...');constructor” trong một lớp. Nhưng ở đây, ta chỉ tạo được một đối tượng cụ thể. Nếu muốn tạo ra đối tượng khác thì ta lại phải viết code lại gần như từ đầu. Nếu các đối tượng sinh viên tạo ra cũng có các thuộc tính giống nhau như: Và các thuộc tính chung như this.hoTen = hoTen;.hoTen = hoTen; this.gioiTinh = gioiTinh;.gioiTinh = gioiTinh; this.namSinh = namSinh;.namSinh = namSinh; this.MSSV = MSSV;.MSSV = MSSV; } Đây là ví dụ khi khai báo Object mà mình đã giới thiệu ở bài trước:hàm constructor thì chỉ cần dùng từ khóa // Tạo các thuộc tính hoTen: 'Ngô Minh Trung', constructor(a, b, c, d) {(a, b, c, d) { this.hoTen = a;.hoTen = a; this.gioiTinh = b;.gioiTinh = b; this.namSinh = c;.namSinh = c; // Tạo các phương thức.MSSV = d; } Đây là ví dụ khi khai báo Object mà mình đã giới thiệu ở bài trước: // Tạo các thuộc tính sinhVien1 = new SinhVien(a, b, c, d); hoTen: 'Ngô Minh Trung',tên tham số và đối số trong hàm constructor giống nhau. constructor(hoTen, gioiTinh, MSSV, namSinh) {(hoTen, gioiTinh, MSSV, namSinh) { this.hoTen = hoTen;.hoTen = hoTen; this.gioiTinh = gioiTinh;.gioiTinh = gioiTinh; this.namSinh = namSinh;.namSinh = namSinh; this.MSSV = MSSV;.MSSV = MSSV; } > Ghi chú: Khi tạo class thì ta gọi là tham số. Khi khởi tạo và truyền dữ liệu thì ta gọi nó là đối sốGhi chú: Khi tạo class thì ta gọi là tham số. Khi khởi tạo và truyền dữ liệu thì 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"); sinhVien1 = new SinhVien("Ngô Minh Trung", "Nam", "B1704863", "1999"); var sinhVien2 = new SinhVien("Nguyễn Minh Đức", "Nam"); sinhVien2 = new SinhVien("Nguyễn Minh Đức", "Nam"); var sinhVien3 = new SinhVien(); sinhVien3 = new SinhVien(); // Log ra thông tin đối tượng console.log(sinhVien1);.log(sinhVien1); console.log(sinhVien2); .log(sinhVien2); console.log(sinhVien3); .log(sinhVien3); 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ỗngLư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 JavaScriptCác phương thức getter và setter được sử dụng để truy cập / sửa đổi thuộc tính trong class. 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.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 getterCá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.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 Ví dụ: // Các phương thức getter get getHoTen() { getHoTen() { return this.hoTen; this.hoTen; } get getGioiTinh() { getGioiTinh() { return this.gioiTinh; this.gioiTinh; } get getNamSinh() { getNamSinh() { return this.hoTen; this.hoTen; } get getMSSV() { getMSSV() { return this.MSSV; this.MSSV; } get getNamSinh() { Có bao nhiêu thuộc tính thì sẽ có bấy nhiêu hàm getter trong class. Khi chúng ta sử dụng, chúng ta có thể truy cập giá trị như là một thuộc tính. var sinhVien1 = new SinhVien("Ngô Minh Trung", "Nam", "B1704863", "1999"); sinhVien1 = new SinhVien("Ngô Minh Trung", "Nam", "B1704863", "1999"); var sinhVien2 = new SinhVien("Nguyễn Minh Đức", "Nam"); // Log ra thông tin đối tượng.log(sinhVien1.getGioiTinh); console.log(sinhVien2); console.log(sinhVien3); .log(sinhVien1.getGioiTinh()); 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 JavaScriptCác phương thức getter và setter được sử dụng để truy cập / sửa đổi thuộc tính trong class. cho phép bạn thay đổi giá trị của thuộc tính của đối tượng. 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. Khi chúng ta sử dụng, chúng ta có thể truy cập giá trị như là một thuộc tính. this.hoTen = hoTen;.hoTen = hoTen; } set setGioiTinh(gioiTinh) { setGioiTinh(gioiTinh) { get getNamSinh() { .gioiTinh = gioiTinh; } set setNamSinh(namSinh) { setNamSinh(namSinh) { this.namSinh = namSinh;.namSinh = namSinh; } set setMSSV(MSSV) { setMSSV(MSSV) { this.MSSV = MSSV;.MSSV = MSSV; } get getNamSinh() { Có bao nhiêu thuộc tính thì sẽ có bấy nhiêu hàm getter trong class. Khi chúng ta sử dụng, chúng ta có thể truy cập giá trị như là một thuộc tính. sinhVien1 = new SinhVien("Ngô Minh Trung", "Nam", "B1704863", "1999"); Ví dụ: // Truy cập giới tính thông qua phương thức getter.setGioiTinh = "Nữ"; console.log(sinhVien1.getGioiTinh); // Log ra thông tin đối tượng.log(sinhVien1.getGioiTinh); console.log(sinhVien2); console.log(sinhVien3); Lưu ý #1: JavaScript không hỗ trợ đầy đủ tính đó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 public trong Java, tham khảo trong hướng dẫn: HỌC LẬP TRÌNH JAVA). Kết quả ta được như sau: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 đó) > 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ỗng3. 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 thuộc tính trong class.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ể được gọi thông qua một đối tượng của 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. Khi chúng ta sử dụng, chúng ta có thể truy cập giá trị như là một thuộc tính. constructor(x, y) {(x, y) { this.x = x;.x = x; Ví dụ:.y = y; // Truy cập giới tính thông qua phương thức getter static distance(a, b) { distance(a, b) { const dx = a.x - b.x; dx = a.x - b.x; const dy = a.y - b.y; dy = a.y - b.y; return Math.hypot(dx, dy); Math.hypot(dx, dy); // Truy cập giới tính thông qua phương thức getter } get getNamSinh() { p1 = new Point(5, 5); const p2 = new Point(10, 10); p2 = new Point(10, 10); p1.distance; //undefined.distance; //undefined p2.distance; //undefined.distance; //undefined Có bao nhiêu thuộc tính thì sẽ có bấy nhiêu hàm getter trong class..log(Point.distance(p1, p2)); // 7.0710678118654755 Khi chúng ta sử dụng, chúng ta có thể truy cập giá trị như là một thuộc tính. Ví dụ:// Truy cập giới tính thông qua phương thức getter var sinhVien1 = new SinhVien("Ngô Minh Trung"); sinhVien1 = new SinhVien("Ngô Minh Trung"); class SinhVien { SinhVien { constructor(name) {(name) { this.hoTen = hoTen;.hoTen = hoTen; } } 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: constructor(name) {(name) { this.hoTen = hoTen; .hoTen = hoTen; } } Ví dụ trên sẽ tạo ra lỗi. sinhVien1 = new SinhVien("Ngô Minh Trung"); Để 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:this.hoTen = hoTen; cũng hỗ trợ tính kế thừa (inheritance) như các ngôn ngữ khác, để tạo một lớp kế thừa, bạn sử dụng từ khóa } SinhVien extends ConNguoi {...} var sinhVien1 = new SinhVien("Ngô Minh Trung"); cho chúng ta khả năng sử dụng lại code đã viết. 6. Kế thừa class JavaScript cũng hỗ trợ tính kế thừa (inheritance) như các ngôn ngữ khác, để tạo một lớp kế thừa, bạn sử dụng từ khóa class SinhVien extends ConNguoi {...} constructor(hoTen, namSinh) {(hoTen, namSinh) { Kế thừa cho chúng ta khả năng sử dụng lại code đã viết..hoTen = hoTen || "unknown"; 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..namSinh = namSinh || "unknown"; } getHoTen() {() { Một lớp được kế thừa từ lớp cha sẽ có tất cả tác phương thức từ lớp cha. "Tên " + this.hoTen + ", sinh năm " + this.namSinh; } } class SinhVien extends ConNguoi { SinhVien extends ConNguoi { constructor(maSSV, hoTen, namSinh) {(maSSV, hoTen, namSinh) { super(hoTen, namSinh);(hoTen, namSinh); Ví dụ trên sẽ tạo ra lỗi..maSSV = maSSV || "unknown"; } getThongTin() {() { Để 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: this.getHoTen() + ", mã sinh viên " + this.maSSV; } } Ví dụ trên sẽ tạo ra lỗi. sinhVien1 = new SinhVien("B1704863", "Ngô Minh Trung", "1999"); Để 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:.log(sinhVien1.getThongTin()); this.hoTen = hoTen; } var sinhVien1 = new SinhVien("Ngô Minh Trung");
class SinhVien extends ConNguoi {...} constructor(hoTen, namSinh) {(hoTen, namSinh) { Kế thừa cho chúng ta khả năng sử dụng lại code đã viết..hoTen = hoTen || "unknown"; 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..namSinh = namSinh || "unknown"; } getThongTin() {() { Một lớp được kế thừa từ lớp cha sẽ có tất cả tác phương thức từ lớp cha. "tên " + this.hoTen + ", sinh năm " + this.namSinh; } } class SinhVien extends ConNguoi { SinhVien extends ConNguoi { constructor(maSSV, hoTen, namSinh) {(maSSV, hoTen, namSinh) { super(hoTen, namSinh);(hoTen, namSinh); Ví dụ trên sẽ tạo ra lỗi..maSSV = maSSV || "unknown"; } Để 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: this.hoTen = hoTen; () { return ( ( "MSSV " + this.maSSV + ", " + super.getThongTin() + this.maSSV + ", " + super.getThongTin() } } } Ví dụ trên sẽ tạo ra lỗi. sinhVien1 = new SinhVien("B1704863", "Ngô Minh Trung", "1999"); Để 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:.log(sinhVien1.getThongTin()); this.hoTen = hoTen; } var sinhVien1 = new SinhVien("Ngô Minh Trung"); 6. Kế thừa classJavaScript cũng hỗ trợ tính kế thừa (inheritance) như các ngôn ngữ khác, để tạo một lớp kế thừa, bạn sử dụng từ khóa class SinhVien extends ConNguoi {...} thường được chỉ đến Object chứa phương thức đang được gọi thực thi. Kế thừa cho chúng ta khả năng sử dụng lại code đã viết. constructor(hoTen, namSinh) {(hoTen, namSinh) { Kế thừa cho chúng ta khả năng sử dụng lại code đã viết..hoTen = hoTen || "unknown"; 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..namSinh = namSinh || "unknown"; } getThongTin() {() { Một lớp được kế thừa từ lớp cha sẽ có tất cả tác phương thức từ lớp cha. "Tên " + this.hoTen + ", sinh năm " + this.namSinh; } } Ví dụ: Ta có một lớp this.hoTen = hoTen || "unknown"; this.namSinh = namSinh || "unknown";return "Tên " + this.hoTen + ", sinh năm " + this.namSinh; còn có tác dụng xác định xem đối tượng có phải là một thể hiện (đối tượng) của một class hay không. this.maSSV = maSSV || "unknown"; constructor(hoTen, namSinh) {(hoTen, namSinh) { Kế thừa cho chúng ta khả năng sử dụng lại code đã viết..hoTen = hoTen || "unknown"; 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..namSinh = namSinh || "unknown"; } getThongTin() {() { Một lớp được kế thừa từ lớp cha sẽ có tất cả tác phương thức từ lớp cha. "Tên " + this.hoTen + ", sinh năm " + this.namSinh; } } Ví dụ: Ta có một lớp var sinhVien2 = {}; sinhVien2 = {}; console.log(sinhVien1 instanceof ConNguoi); // true.log(sinhVien1 instanceof ConNguoi); // true console.log(sinhVien2 instanceof ConNguoi); // False .log(sinhVien2 instanceof ConNguoi); // False Như vậy ta sẽ thấy Còn đối với Ví dụ: constructor(hoTen, namSinh) {(hoTen, namSinh) { this.hoTen = hoTen || "unknown";.hoTen = hoTen || "unknown"; this.namSinh = namSinh || "unknown"; .namSinh = namSinh || "unknown"; } getHoTen() {() { return "Tên " + this.hoTen + ", sinh năm " + this.namSinh; "Tên " + this.hoTen + ", sinh năm " + this.namSinh; } return "Tên " + this.hoTen + ", sinh năm " + this.namSinh; class SinhVien extends ConNguoi { SinhVien extends ConNguoi { constructor(maSSV, hoTen, namSinh) {(maSSV, hoTen, namSinh) { super(hoTen, namSinh);(hoTen, namSinh); }.maSSV = maSSV || "unknown"; } getThongTin() {() { return "Tên " + this.hoTen + ", sinh năm " + this.namSinh; this.getHoTen() + ", mã sinh viên " + this.maSSV; } return "Tên " + this.hoTen + ", sinh năm " + this.namSinh; } sinhVien1 = new SinhVien("B1704863", "Ngô Minh Trung", "1999"); console.log(sinhVien1 instanceof SinhVien); // true.log(sinhVien1 instanceof SinhVien); // true this.maSSV = maSSV || "unknown";.log(sinhVien1 instanceof ConNguoi); // true return this.getHoTen() + ", mã sinh viên " + this.maSSV; var sinhVien1 = new SinhVien("B1704863", "Ngô Minh Trung", "1999");console.log(sinhVien1 instanceof ConNguoi); // true trừu tượng hóa các nguyên mẫu (prototypes) một cách tuyệt vời. Kết quả cả hai đều trả về 9. Class và prototypes Cú pháp lớp (class) trong JavaScript thực hiện trừu tượng hóa các nguyên mẫu (prototypes) một cách tuyệt vời. Các lớp được xây dựng từ việc 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 như một hàm tạo.(hoTen, namSinh) { this.hoTen = hoTen || "unknown";.hoTen = hoTen || "unknown"; this.namSinh = namSinh || "unknown"; .namSinh = namSinh || "unknown"; } getThongTin() {() { return "Tên " + this.hoTen + ", sinh năm " + this.namSinh; "Tên " + this.hoTen + ", sinh năm " + this.namSinh; } return "Tên " + this.hoTen + ", sinh năm " + this.namSinh; } sinhVien1 = new ConNguoi("Ngô Minh Trung", 1999); console.log(sinhVien1.getThongTin());.log(sinhVien1.getThongTin()); this.maSSV = maSSV || "unknown";.log(sinhVien1 instanceof ConNguoi); return this.getHoTen() + ", mã sinh viên " + this.maSSV; function ConNguoi(hoTen, namSinh) { ConNguoi(hoTen, namSinh) { this.hoTen = hoTen || "unknown";.hoTen = hoTen || "unknown"; this.namSinh = namSinh || "unknown"; .namSinh = namSinh || "unknown"; return "Tên " + this.hoTen + ", sinh năm " + this.namSinh; ConNguoi.prototype.getThongTin = function() {.prototype.getThongTin = function() { } "Tên " + this.hoTen + ", năm sinh" + this.namSinh; return "Tên " + this.hoTen + ", sinh năm " + this.namSinh; } sinhVien1 = new ConNguoi("Ngô Minh Trung", 1999); console.log(sinhVien1.getThongTin());.log(sinhVien1.getThongTin()); this.maSSV = maSSV || "unknown";.log(sinhVien1 instanceof ConNguoi); return this.getHoTen() + ", mã sinh viên " + this.maSSV; var sinhVien1 = new SinhVien("B1704863", "Ngô Minh Trung", "1999"); console.log(sinhVien1 instanceof ConNguoi); // trueKết quả cả hai đều trả về 9. Class và prototypes Cú pháp lớp (class) trong JavaScript thực hiện trừu tượng hóa các nguyên mẫu (prototypes) một cách tuyệt vời. |