Hàm khởi tạo đối tượng trong JavaScript
Bạn cần tạo nhiều đối tượng cùng một kiểu. JavaScript cung cấp một vài cách để thực hiện việc này một cách hiệu quả.
Hàm khởi tạo (Constructor Functions)
Một hàm khởi tạo là một hàm được sử dụng để thiết lập các đối tượng mới. Hãy tuân thủ các quy tắc sau để tránh lỗi:
- Viết hoa chữ cái đầu tiên của tên hàm. Điều này giúp bạn nhận diện nó là một hàm khởi tạo.
- Sử dụng từ khóa
new. Nếu quên từ khóa này, hàm sẽ chạy như một hàm bình thường và không thể tạo ra đối tượng.
Giá trị mặc định
Bạn có thể thiết lập các giá trị mặc định trong hàm khởi tạo. Điều này đảm bảo các đối tượng của bạn vẫn hợp lệ ngay cả khi bạn bỏ qua một số chi tiết.
Ví dụ:
function Person(name = "Unknown", age = 0) {
this.name = name;
this.age = age;
}
Nếu bạn gọi new Person(), tên sẽ trở thành "Unknown" và tuổi sẽ là 0.
Object.create()
Bạn có thể sử dụng Object.create() để tạo một đối tượng mới dựa trên một đối tượng đã có. Cách này sử dụng tính kế thừa dựa trên prototype. Thay vì sao chép dữ liệu, đối tượng mới sẽ liên kết với prototype gốc.
Tối ưu hóa bộ nhớ
Đừng đặt các phương thức (methods) bên trong chính hàm khởi tạo. Nếu làm vậy, mỗi đối tượng mới sẽ có một bản sao riêng của phương thức đó, gây lãng phí bộ nhớ.
Thay vào đó, hãy thêm các phương thức vào prototype. Bằng cách này, tất cả các đối tượng sẽ dùng chung một phiên bản duy nhất của phương thức đó.
Ví dụ:
Person.prototype.greet = function() {
console.log("Hello " + this.name);
};
Tính kế thừa
Class cho phép một class kế thừa từ một class khác. Sử dụng từ khóa super() trong class con để gọi hàm khởi tạo của class cha. Điều này cho phép class con truy cập vào các thuộc tính của class cha.
Lợi ích của việc sử dụng hàm khởi tạo:
- Tái sử dụng mã nguồn: Tạo nhiều đối tượng với cùng một khuôn mẫu.
- Logic sạch sẽ: Giữ việc thiết lập đối tượng ở một nơi duy nhất.
- Khởi tạo dễ dàng: Thiết lập các giá trị cụ thể trong quá trình tạo đối tượng.
- Tính kế thừa: Xây dựng các đối tượng phức tạp từ các đối tượng đơn giản hơn.
Source: https://www.geeksforgeeks.org/javascript/js-constructor-method/ Source: https://www.w3schools.com/js/js_object_constructors.asp
Full post: https://dev.to/kamalesh_ar_6252544786997/object-constructors-in-javascript-2e96