Constructor Function trong JavaScript

Trong bài viết này, chúng ta sẽ cùng tìm hiểu về Constructor Function trong JavaScript thông qua các ví dụ nhé 😁😀.

Constructor Function trong JavaScript

Trong JavaScript, một constructor function được sử dụng để tạo các object.

Ví dụ:

// constructor function
function Person() {
    this.name = 'Trung',
    this.age = 22,
    this.address = 'TP. HCM'
}

// tạo một object
const person = new Person();

Trong ví dụ trên, hàm Person() được gọi là một hàm tạo đối tượng - constructor function.

Để tạo một đối tượng từ một constructor function, chúng ta sử dụng từ khóa new. Chữ cái đầu tiên của hàm khởi tạo chúng ta nên viết hoa.

Trong JavaScript, bạn có thể tạo nhiều đối tượng từ một constructor function.

Ví dụ:

// constructor function
function Person () {
    this.name = 'Trung',
    this.age = 20,
    this.sayHi = function () {
        console.log('hi 😁');
    }
}

// tạo các object khác nhau
const person1 = new Person();
const person2 = new Person();

console.log(person1.sayHi());  // hi 😁
console.log(person2.sayHi());  // hi 😁

Trong ví dụ trên, chúng ta đã tạo hai đối tượng khác nhau bằng cách sử dụng cùng một constructor function.

JavaScript this Keyword

Trong JavaScript, khi từ khóa this được sử dụng trong một constructor function, từ khóa this sẽ chính là object khi object này được tạo ra.

Ví dụ:

// constructor function
function Person () {
    this.name = 'Trung',
}

// tạo object
const person = new Person();

// truy xuất thuộc tính
console.log(person.name);  // Trung

Constructor Function Parameters

Chúng ta có thể tạo một hàm khởi tạo với các tham số.

Ví dụ:

// constructor function
function Person (personName, personAge) {
    // gán giá trị tham số tương ứng
    this.name = personName,
    this.age = personAge,

    this.greet = function () {
        return 'Xin chào, mình là' + ' ' + this.name;
    }
}

// tạo object
const person1 = new Person('Hà', 22);
const person2 = new Person('Đức', 18);

console.log(person1.name); // "Hà"
console.log(person2.name); // "Đức"

Trong ví dụ trên, chúng ta đã truyền các đối số cho hàm khởi tạo trong quá trình tạo đối tượng. Nhờ đó, mỗi đối tượng có thể có các thuộc tính với giá trị khác nhau.

Constructor Function Vs Object Literal

Object Literal thường được sử dụng để tạo một đối tượng duy nhất. Nếu bạn muốn tạo nhiều đối tượng, chúng ta sẽ dùng hàm khởi tạo.

Ví dụ:

// object literal
let person = {
    name: 'Minh'
}

// constructor function
function Person () {
    this.name = 'Trang'
}

let person1 = new Person();
let person2 = new Person();

Mỗi đối tượng được tạo từ hàm khởi tạo là unique. Do đó, chúng ta có thể thêm một thuộc tính mới vào một đối tượng cụ thể.

Ví dụ:

// constructor function
function Person () {
    this.name = 'Minh'
}

let person1 = new Person();
let person2 = new Person();

// thêm thuộc tính mới cho person1
person1.gender = true;

Chúng ta chỉ thêm thuộc tính gender cho object person1 nên ở person2 sẽ không có thuộc tính này.

Tuy nhiên, nếu một đối tượng được tạo bằng object literal, nếu bạn sử dụng object này cho một biến khác, thì bất kỳ thay đổi nào trong giá trị của biến sẽ thay đổi đối tượng ban đầu.

Ví dụ:

// object literal
let person = {
    name: 'Tú'
}

console.log(person.name); // Tú

let user = person;

// đổi giá trị cho name
user.name = 'Hoài';

// object cũ sẽ bị thay đổi theo
console.log(person.name); // Hoài

Prototype trong JavaScript

Trong JavaScript, mỗi hàm và đối tượng đều có thuộc tính mặc định có tên là prototype. Bạn cũng có thể thêm các thuộc tính và phương thức vào một hàm khởi tạo bằng cách sử dụng prototype.

Ví dụ:

// constructor function
function Person () {
    this.name = 'Trang',
    this.age = 20
}

let person1 = new Person();
let person2 = new Person();

// thêm thuộc tính vào constructor function
Person.prototype.gender = 'nữ';

console.log(person1.gender); // nữ
console.log(person2.gender); // nữ

Built-in Constructors trong JavaScript

JavaScript cũng có các Built-in Constructors.

Ví dụ:

let obj = new Object();    
let str = new String();    
let number = new Number();    
let boolean = new Boolean();   

Trong JavaScript, ta có thể tạo chuỗi bằng cách:

const website = new String('homiedev');
console.log(website.toString()); // "homiedev"

Chúng ta nên tạo theo cách bình thường, chẳng hạn như const website = 'homiedev';, const number = 29;, không nên khai báo chuỗi, số và boolean là các object vì chúng làm chậm chương trình.

Từ khóa class trong JavaScript đã được giới thiệu trong ES6 (ES2015) cũng cho phép chúng ta tạo các đối tượng. class tương tự như các hàm khởi tạo trong JavaScript. Chúng ta sẽ tìm hiểu về từ khóa này trong bài viết sắp tới nhé.