Class Trong JavaScript - Lập Trình Từ Đầu
Có thể bạn quan tâm
Class là một khái niệm mà ta đã thấy nhiều trong các ngôn ngữ lập trình khác như C, PHP, … Nó là một cái gì đó không thể thiếu trong việc lập trình và ta phải thường xuyên sử dụng tới.
Trong lập trình Js thì class giúp ta tạo đối tượng có phương thức và thuộc tính. Về phần hướng đối tượng thì ta sẽ được tìm hiểu kỹ hơn trong phần sau nhé. Và thực ra bạn có thể xem như việc tạo class gần tương tự như một function vậy nhưng nó là một function đặc biệt. Bạn có thể định nghĩa class giống như bạn định nghĩa function theo hai kiểu function expressions và function declarations .
2. Khai báo class trong JavaScriptTa có cú pháp đơn giản như sau:
class (Tên Class){ constructor() {} Phương thức 1() {} Phương thức 2() {} ... }Ví dụ:
// Tạo ra một class SinhVien class SinhVien { //Hàm khởi tạo constructor(hoTen, gioiTinh, MSSV, namSinh) { this.hoTen = hoTen; this.gioiTinh = gioiTinh; this.namSinh = namSinh; this.MSSV = MSSV; } //Khai báo phương thức hocBai() { document.write('học bài'); } diNgu() { document.write('ngủ'); } xemPhim() { document.write('xem phim'); } }Một class không phải là một đối tượng mà nó là một khuôn mẫu chung cho các đối tượng. Khi muốn tạo ra một đối tượng cụ thể thì ta sẽ dựa vào khuôn mẫu này. Ví dụ với class “SinhVien” như ở trên:
// Tạo đối tượng từ class SinhVien var sinhVien1 = new SinhVien(); var sinhVien2 = new SinhVien(); var sinhVien3 = new SinhVien();Hay một ví dụ khác nhé
<p id="demo"></p> <script> class Car { constructor(name, year) { this.name = name; this.year = year; } } const myCar = new Car("Ford", 2022); document.getElementById("demo").innerHTML = myCar.name + " " + myCar.year; </script>Và đối với class ta sẽ luôn thêm một phương thức là constructor() . Nó là phương thức gì thì ta sẽ tìm hiểu ở phần sau nhé.
3. Constructor trong JavaScriptPhươ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 class nào đó. Nó sẽ tự động được gọi khi bạn tạo ra một đối tượng từ class . Chỉ có thể có một phương thức đặc biệt với tên là constructo” trong một lớp. Nếu có nhiều hơn một lần xuất hiện của phương thức khởi tạo thì lỗi sẽ xảy ra.
Như vậy ta có thể thấy ngay sự khác biệt giữa Js và một số ngôn ngữ khác về hàm khởi tạo như C, Java,… Và nếu như trong Js bạn không xác định một phương thức khởi tạo thì Js sẽ thêm một phương thức khởi tạo trống.
Ví dụ
//Hàm khởi tạo constructor(hoTen, gioiTinh, MSSV, namSinh) { this.hoTen = hoTen; this.gioiTinh = gioiTinh; this.namSinh = namSinh; this.MSSV = MSSV; }Ta chỉ cần dùng từ khóa constructor là truyền vào danh sách tham số là các thuộc tính của class là xong. Sau đó gán các thuộc tính của lớp bằng từ khóa this . Nghe có vẻ khá đơn giản.
Chú ý
Đây là ta sẽ note lại để các bạn đỡ nhầm lẫn tên gọi. 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ố
Và khi gọi ra một đối tượng ta có thể làm như sau
// Khởi tạo các đối tượng sinh viên var sinhVien1 = new SinhVien("Thành Nguyễn", "Nam", "PH15680", "2002"); var sinhVien2 = new SinhVien("Chu Minh Nam", "Nam"); var sinhVien3 = new SinhVien(); // Log ra thông tin đối tượng console.log(sinhVien1); console.log(sinhVien2); console.log(sinhVien3);Các tham số bị thiếu sẽ trả về underfined . Ta cũng nên đặt tên đối số truyền vào với thên thuộc tính giống nhau để dễ phân biệt. Ví dụ như constructor(name) {this.name= name;}
Từ khóa » Cách Tạo Class Trong Javascript
-
Class Trong JavaScript - NIIT - ICT Hà Nội
-
Hướng Dẫn Tạo Class Trong Javascript - Kipalog
-
Tìm Hiểu Class Trong Javascript - Viblo
-
Ba Cách Tạo Class Trong Javascript - Freetuts
-
Cách Tạo Class Trong Javascript (Hướng đối Tượng OOP ES6)
-
Class Trong JavaScript | Học Lập Trình JavaScript
-
Lớp Trong Javascript
-
Cú Pháp Class Trong JavaScript Cơ Bản
-
Tìm Hiểu Class Trong Javascript - Niềm Vui Lập Trình
-
Cách Sử Dụng Javascript Class - VNTALKING
-
Xu Hướng 7/2022 # Hướng Dẫn Tạo Class Trong Javascript # Top ...
-
Class Trong JavaScript
-
Thuộc Tính Và Phương Thức Static Của Class Trong Javascript
-
Sử Dụng Class Trong ES6 | Lê Vũ Nguyên Dạy Học Lập Trình