Khởi tạo đối tượng với Constructor trong JavaScript

Trong JavaScript, Object là một kiểu dữ liệu quan trọng, được sử dụng để lưu trữ và quản lý thông tin theo dạng cặp key-value. Các đối tượng giúp tổ chức dữ liệu một cách có cấu trúc và linh hoạt hơn, đặc biệt trong các ứng dụng phức tạp.

Một trong những cách hiệu quả để tạo Object là sử dụng Constructor Function. Đây là một phương pháp giúp tạo nhiều đối tượng có cùng cấu trúc một cách dễ dàng, giúp tiết kiệm thời gian và tăng tính tái sử dụng của mã nguồn. Thay vì tạo từng Object thủ công bằng Object Literal ({}), ta có thể dùng Constructor để khởi tạo hàng loạt đối tượng có chung thuộc tính và phương thức.

Constructor Function được sử dụng rộng rãi trong lập trình JavaScript, đặc biệt trong các ứng dụng web, quản lý dữ liệu người dùng, hệ thống sản phẩm, và cả trong lập trình hướng đối tượng (OOP). Ngoài ra, ES6 cũng giới thiệu class, một cú pháp mới giúp viết Constructor Function dễ đọc và bảo trì hơn.

Khái niệm về Constructor trong JavaScript

Trong JavaScript, Constructor Function là một hàm đặc biệt được sử dụng để tạo và khởi tạo các đối tượng. Thay vì khai báo từng đối tượng một cách thủ công bằng Object Literal ({}), ta có thể sử dụng Constructor để tạo nhiều đối tượng có cùng cấu trúc một cách nhanh chóng.

Đặc điểm của Constructor Function:

• Được đặt tên theo quy tắc PascalCase (chữ cái đầu của mỗi từ viết hoa).
• Được gọi bằng từ khóa new khi khởi tạo đối tượng.
• Sử dụng từ khóa this để gán giá trị cho các thuộc tính của đối tượng.
• Không cần sử dụng từ khóa return, nhưng vẫn tự động trả về đối tượng mới.

Ví dụ Constructor Function:

// Định nghĩa Constructor Function
function Person(name, age) {
    this.name = name; 
    this.age = age; 

    this.sayHello = function() {
        console.log(`Xin chào, tôi là ${this.name} và tôi ${this.age} tuổi.`);
    };
}

// Khởi tạo đối tượng từ Constructor
const person1 = new Person("Kiên", 25);
const person2 = new Person("Dương", 30);

person1.sayHello(); // Output: Xin chào, tôi là Kiên và tôi 25 tuổi.
person2.sayHello(); // Output: Xin chào, tôi là Dương và tôi 30 tuổi.

Kết quả:

So sánh Constructor Function với Object Literal ({})

Object Literal

const person = {
    name: "Kiên",
    age: 25,
    sayHello: function() {
        console.log(`Xin chào, tôi là ${this.name}.`);
    }
};

console.log(person.name); // Kiên
person.sayHello(); // Xin chào, tôi là Kiên.

Constructor Function (Tái sử dụng dễ dàng)

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

const person1 = new Person("Kiên", 25);
const person2 = new Person("Dương", 30);

console.log(person1.name); // Kiên
console.log(person2.name); // Dương

Khi nào nên sử dụng Constructor Function?

Nên dùng Constructor Function khi:

• Cần tạo nhiều đối tượng có cùng cấu trúc.
• Muốn tổ chức mã nguồn một cách rõ ràng và có tính tái sử dụng cao.
• Làm việc với lập trình hướng đối tượng (OOP) trong JavaScript.
• Xây dựng các module có thể mở rộng, chẳng hạn như quản lý người dùng, sản phẩm, đơn hàng.

Không nên dùng nếu:

• Chỉ cần một hoặc vài đối tượng đơn giản (sử dụng Object Literal sẽ tốt hơn).
• Không cần tạo nhiều đối tượng có cùng cấu trúc.
• Không muốn làm việc với từ khóa new hoặc this (có thể dùng Object.create() thay thế).

Constructor Function là một phương pháp mạnh mẽ giúp tạo Object một cách hiệu quả, dễ mở rộng, và phù hợp với các ứng dụng lớn. Nếu chỉ cần một Object đơn giản, Object Literal sẽ là lựa chọn tốt hơn.

Cách khởi tạo đối tượng bằng Constructor Function trong JavaScript

Viết Constructor Function

Khi tạo Constructor Function trong JavaScript, có một số quy tắc quan trọng:

• Tên Constructor: Viết hoa chữ cái đầu theo quy tắc PascalCase (ví dụ: Person, Car).
• Dùng this để gán giá trị: Trong Constructor, this đại diện cho đối tượng sẽ được tạo ra.
• Không cần return: Constructor tự động trả về đối tượng mới khi được gọi với new.

Ví dụ về Constructor Function đơn giản:

// Định nghĩa Constructor Function
function Person(name, age) {
    this.name = name;  // Gán giá trị cho thuộc tính
    this.age = age;

    // Phương thức của Object
    this.sayHello = function() {
        console.log(`Xin chào, tôi là ${this.name} và tôi ${this.age} tuổi.`);
    };
}

Tạo Object bằng Constructor Function

Để tạo một đối tượng từ Constructor Function, chúng ta sử dụng từ khóa new.
Cách hoạt động của new khi gọi new Constructor() gồm 3 bước:

• Tạo một đối tượng rỗng {}
• Gán this vào đối tượng mới (để các thuộc tính và phương thức của Constructor được gán vào đó).
• Trả về đối tượng mới đã khởi tạo.

// Tạo đối tượng từ Constructor Function
const person1 = new Person("Kiên", 25);
const person2 = new Person("Dương", 30);

// Gọi phương thức
person1.sayHello(); // Output: Xin chào, tôi là Kiên và tôi 25 tuổi.
person2.sayHello(); // Output: Xin chào, tôi là Dương và tôi 30 tuổi.

console.log(person1.name); // Kiên
console.log(person2.age);  // 30

Cách hoạt hộng của new trong Constructor Function

Giả sử ta gọi:

const user = new Person("An", 20);

Sau khi new Person("An", 20) chạy, JavaScript thực hiện:

// 1. Tạo object rỗng
let user = {}; 

// 2. Gán this vào object mới
user.__proto__ = Person.prototype; // Kết nối object với prototype của Person
Person.call(user, "An", 20); // Gọi hàm với this là user

// 3. Trả về object mới
return user;

Vì vậy, new giúp tạo đối tượng với các thuộc tính và phương thức từ Constructor mà không cần khai báo thủ công từng lần.

Thêm phương thức vào Constructor Function trong JavaScript

Có hai cách để thêm phương thức vào một Constructor Function trong JavaScript:

• Khai báo trực tiếp trong Constructor
• Sử dụng prototype để định nghĩa phương thức

Khai báo phương thức trực tiếp trong Constructor

Chúng ta có thể khai báo phương thức ngay trong Constructor bằng cách gán nó cho this:

function Person(name, age) {
    this.name = name;
    this.age = age;

    // Khai báo phương thức trực tiếp trong Constructor
    this.sayHello = function() {
        console.log(`Xin chào, tôi là ${this.name} và tôi ${this.age} tuổi.`);
    };
}

const person1 = new Person("Kiên", 25);
person1.sayHello();  // Output: Xin chào, tôi là Kiên và tôi 25 tuổi.

Ưu điểm: Dễ hiểu, mỗi đối tượng có một bản sao riêng của phương thức.

Nhược điểm: Cần hiểu rõ về prototype để sử dụng hiệu quả.

So sánh phương thức trong Constructor vs Prototype

Khi nào dùng prototype? Khi phương thức được dùng chung bởi nhiều đối tượng, giúp tiết kiệm bộ nhớ.

Sử dụng Class trong ES6 để tạo Constructor trong JavaScript

ES6 giới thiệu class, giúp viết Constructor dễ đọc hơn và hỗ trợ kế thừa tốt hơn.

Giới thiệu class trong ES6+

class trong JavaScript là một cách hiện đại để định nghĩa Constructor và các phương thức gọn gàng hơn.
Dù class chỉ là một cú pháp mới, nó hoạt động tương tự như Constructor Function nhưng có tính năng rõ ràng hơn.

So sánh class và Constructor Function

Cách viết Constructor với class và phương thức trong class

// Định nghĩa class Person
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // Khai báo phương thức trực tiếp trong class
    sayHello() {
        console.log(`Xin chào, tôi là ${this.name} và tôi ${this.age} tuổi.`);
    }
}

// Tạo đối tượng từ class
const person3 = new Person("Trung", 22);
person3.sayHello(); // Output: Xin chào, tôi là Trung và tôi 22 tuổi.

Kết quả :

Điểm khác biệt so với Constructor Function:

• Không cần gán phương thức vào prototype, vì phương thức được khai báo trực tiếp trong class.
• class hỗ trợ extends để kế thừa dễ dàng hơn.

Ví dụ Constructor Function vs Class trong JavaScript

Constructor Function

function Animal(name) {
    this.name = name;
}

// Định nghĩa phương thức trong prototype
Animal.prototype.makeSound = function() {
    console.log(`${this.name} phát ra âm thanh!`);
};

const dog = new Animal("Chó");
dog.makeSound(); // Output: Chó phát ra âm thanh!

class Animal {
    constructor(name) {
        this.name = name;
    }

    makeSound() {
        console.log(`${this.name} phát ra âm thanh!`);
    }
}

const cat = new Animal("Mèo");
cat.makeSound(); // Output: Mèo phát ra âm thanh!

function Person(name) {
    this.name = name;
}

const person1 = Person("Kiên");  // Quên `new`
console.log(person1.name); // TypeError: Cannot read properties of undefined

const person2 = new Person("Kiên");  // Đúng
console.log(person2.name); // Output: Kiên

function Person(name) {
    if (!(this instanceof Person)) {
        throw new Error("Hãy dùng từ khóa `new` khi khởi tạo!");
    }
    this.name = name;
}

function User(name) {
    this.name = name;

    this.sayHello = function() {
        console.log(`Xin chào, tôi là ${this.name}`);
    };
}

const user = new User("Dương");
const greet = user.sayHello; 
greet(); // Output: Undefined hoặc lỗi TypeError (tùy chế độ nghiêm ngặt)

this.sayHello = function() {
    console.log(`Xin chào, tôi là ${this.name}`);
}.bind(this);

this.sayHello = () => {
    console.log(`Xin chào, tôi là ${this.name}`);
};

function Config() {
    this.apiUrl = "https://api.example.com";
    this.timeout = 5000;
}

const config = new Config(); // Không cần thiết dùng `new`

function Config() {
    this.apiUrl = "https://api.example.com";
    this.timeout = 5000;
}

const config = new Config(); // Không cần thiết dùng `new`

const config = {
    apiUrl: "https://api.example.com",
    timeout: 5000,
};

function Car(brand) {
    this.brand = brand;
}

Car.prototype.features = []; // Tất cả đối tượng sẽ chia sẻ mảng này!

const car1 = new Car("Toyota");
const car2 = new Car("Honda");

car1.features.push("GPS");
console.log(car2.features); // Output: ["GPS"] (Không mong muốn)

function Car(brand) {
    this.brand = brand;
    this.features = []; // Mỗi đối tượng có một bản sao riêng
}

function User(name, email) {
    this.name = name;
    this.email = email;

    this.getInfo = function() {
        return `${this.name} - ${this.email}`;
    };
}

const user1 = new User("Kiên", "[email protected]");
const user2 = new User("Dương", "[email protected]");

console.log(user1.getInfo()); // Kiên - [email protected]
console.log(user2.getInfo()); // Dương - [email protected]

function Product(name, price, stock) {
    this.name = name;
    this.price = price;
    this.stock = stock;

    this.getInfo = function() {
        return `${this.name} có giá ${this.price} VND (${this.stock} cái còn lại)`;
    };
}

const product1 = new Product("Laptop", 15000000, 5);
const product2 = new Product("Điện thoại", 7000000, 10);

console.log(product1.getInfo()); // Laptop có giá 15000000 VND (5 cái còn lại)
console.log(product2.getInfo()); // Điện thoại có giá 7000000 VND (10 cái còn lại)

function Animal(name) {
    this.name = name;
}

Animal.prototype.makeSound = function() {
    console.log(`${this.name} phát ra âm thanh!`);
};

const dog = new Animal("Chó");
dog.makeSound(); // Chó phát ra âm thanh!

class Animal {
    constructor(name) {
        this.name = name;
    }

    makeSound() {
        console.log(`${this.name} phát ra âm thanh!`);
    }
}

const cat = new Animal("Mèo");
cat.makeSound(); // Mèo phát ra âm thanh!