Constructor trong JavaScript

Constructor trong JavaScript

Việc tạo từng đối tượng một rất chậm. Nếu bạn cần mười sinh viên với cùng các thuộc tính, bạn sẽ lãng phí thời gian để viết đi viết lại cùng một đoạn mã.

JavaScript giải quyết vấn đề này bằng Constructor Functions.

Hãy coi constructor như một bản thiết kế. Một bản thiết kế nhà không phải là một ngôi nhà, nhưng bạn sử dụng nó để xây dựng nhiều ngôi nhà.

Cách thức hoạt động:

Một constructor là một hàm đặc biệt. Bạn sử dụng từ khóa new để tạo các đối tượng từ nó.

Ví dụ:

function Student(name, age, city) {
    this.name = name;
    this.age = age;
    this.city = city;
}

const student1 = new Student("John", 21, "Chennai");
const student2 = new Student("David", 22, "Madurai");

Tại sao nên dùng cách này?

• Nó tiết kiệm thời gian.
• Nó ngăn chặn việc lặp lại mã.
• Nó tạo ra một cấu trúc chuẩn cho dữ liệu của bạn.

Vai trò của this:

Bên trong một constructor, từ this tham chiếu đến đối tượng mới mà bạn đang tạo.

Nếu một giáo viên nói "lớp học của tôi", từ "tôi" sẽ chỉ về chính giáo viên đó. Trong mã nguồn, this.name sẽ chỉ vào tên của đối tượng cụ thể mà bạn vừa tạo.

Điều gì xảy ra khi bạn sử dụng new?

Khi bạn chạy const emp = new Employee("John", 50000), bốn bước sẽ diễn ra:

1. JavaScript tạo ra một đối tượng trống.
2. Từ khóa this trỏ đến đối tượng mới đó.
3. Các thuộc tính được thêm vào đối tượng.
4. Đối tượng được trả về cho bạn.

Thêm các hành động:

Đối tượng có thể làm nhiều hơn là chỉ lưu trữ dữ liệu. Chúng có thể thực hiện các hành động. Trong lập trình, các hành động này được gọi là phương thức (methods).

Ví dụ:

function Laptop(brand, ram) {
    this.brand = brand;
    this.ram = ram;
    this.showDetails = function() {
        console.log(this.brand, this.ram);
    };
}

Đối tượng Laptop giờ đây vừa chứa dữ liệu, vừa chứa một hàm để hiển thị dữ liệu đó.

Các quy tắc thực hành tốt nhất (Best Practices):

• Luôn viết hoa chữ cái đầu tiên của constructor. Sử dụng Student, không phải student. Điều này báo hiệu cho các lập trình viên khác rằng cần sử dụng từ khóa new.
• Luôn sử dụng từ khóa new. Nếu bạn quên, hàm sẽ hoạt động như một hàm bình thường và làm hỏng mã của bạn.

So sánh:

Object Literals:

• Tốt cho một đối tượng duy nhất.
• Đơn giản và nhanh chóng.
• Không có bản thiết kế.

Constructor Functions:

• Tốt cho nhiều đối tượng.
• Có thể tái sử dụng và có tổ chức.
• Sử dụng phương pháp bản thiết kế.

Source: https://www.w3schools.com/js/js_object_constructors.asp Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor Full post: https://dev.to/annapoo/constructor-in-javascript-4nbm