Hướng dẫn constructor trong javascript

Trong bài này chúng ta sẽ tìm hiểu hàm constructor trong javascript, qua đó sẽ giúp bạn hiểu khái niệm constructor là gì? Tại sao và khi nào nên sử dụng constructor trong js.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Nếu bạn đã từng học qua Java hay một ngôn ngữ lập trình hướng đối tượng khác thì chắc hẳn đã gặp khái niệm constructor rồi phải không nào? Đây là kỹ thuật tạo ra các hàm khởi tạo cho các đối tượng.

Với javascript thì có một chút khác biệt về định nghĩa vì nó không tồn tai khái niệm về lớp. Trong javascript, constructor là kỹ thuật giúp tạo ra các thuộc tính và phương thức, và ta có thể sử dụng từ khóa new để khởi tạo một thể hiện của đối tượng. Chi tiết thế nào thì hãy cùng mình tìm hiểu ngay nhé.

1. Constructor trong Javascript là gì?

Constructor trong js là một kỹ thuật giúp ta có thể thêm các phương thức và thuộc tính cho một function, lúc này cách hoạt động của function này giống như một đối tượng, cụ thể là:

Bài viết này được đăng tại [free tuts .net]

• Ta có thể xem function là một object.
• Ta có thể thêm các thuộc tính và phương thức.
• Ta có thể sử dụng từ khóa new để khởi tạo nhiều thể hiện cho đối tượng.

Trước tiên, các bạn hãy xem nguyên nhân tại sao constructor ra đời bằng cách so sánh một vài chương trình nhé.

Giả sử mình có một hàm Person như dưới đây.

function Person() {
    console.log("Tôi là Cường");
}
Person(); // Tôi là Cường

Bây giờ mình muốn tạo ra một người khác thì sẽ định nghĩa thêm một hàm nữa như sau:

function Person_2(){
    console.log("Tôi là Kính");
}
Person_2(); // Tôi là Kính

Nếu mình muốn tạo 1000 người thì ... phải tạo 1000 hàm phải không các bạn? Điều này thật là kinh khủng và chương trình sẽ không chuyên nghiệp.

Thay vì viết một cách cứng nhắc như vậy thì mình sẽ sử dụng từ khóa new. Chi tiết thế nào thì hãy qua phần tiếp theo nhé.

2. Constructor với function trong javascript

Để giải quyết vấn đề trên thì mình sẽ sử dụng từ khóa new để khởi tạo ra nhiều thể hiện khác nhau của hàm Person.

Trước tiên hãy tạo một hàm như sau:

function Person(name) {
    console.log("Tôi là " + name);
}

Bây giờ muốn tạo ra 2 người khác nhau thì chỉ việc sử dụng từ khóa new:

function Person(name) {
    console.log("Tôi là " + name);
}

let person1 = new Person("Cường"); // Tôi là Cường
let person2 = new Person("Kính"); // Tôi là Kính

Mỗi người sẽ có những đặc điểm và hành động khác nhau, vì vậy ta cũng có thể thêm thuộc tính cho chúng ngay trong function. Ví dụ dưới đây mình thêm thuộc tính name và một hành động showName.

function Person(name) {
    this.name = name;
    this.showName = function(){
        console.log(this.name);
    }
}

let person1 = new Person("Cường");
person1.showName(); // Cường

let person2 = new Person("Kính");
person2.showName(); // Kính

Từ khóa this sẽ trỏ đến đối tượng hiện tại, và đó chính là các thể hiện của hàm Person.

Ngoài ra, nếu bạn gọi trực tiếp hàm như sau:

Thì đối this chính là đối tượng window chứ không phải là đối tượng hiện tại nữa. Nguyên nhân vì sao thì các bạn hãy tham khảo trong bài viết this trong javascript nhé.

Khác hoàn toàn với object, bạn không thể thêm thuộc tính ở bên ngoài hàm như sau:

function Person(name) {
    this.name = name;
    this.showName = function(){
        console.log(this.test);
    }
}

// Thêm thế này sẽ không có tác dụng, thuộc tính test trong hàm 
// person là undefined
Person.test = 123;
 
let person1 = new Person("Cường");
person1.showName(); // undefined

3. Constructor với class trong javascript

Javascript class được giới thiệu từ ES6, điều này giúp javascript trở thành một ngôn ngữ cực kì khó bởi nó có quá nhiều điều bí ẩn. Nếu trước đây JS được đánh giá là ngôn ngữ chỉ làm được ở client thì nay ta có thể sử dụng nó ở backend.

Nói đến class thì phải có hàm khởi tạo, cú pháp như sau:

class Person {
    // Khai báo constructor, đc phép thêm nhiều tham số
    constructor(name) {
        this.name = name;
    }

    // Thêm phương thức vào class
    showName() {
        console.log(this.name);
    }
}

let person1 = new Person("Cuong");
person1.showName();

Như vậy là chúng ta đã tìm hiểu xong hàm constructor trong Javascript qua hai phần, thứ nhất là constructor function và thứ hai là hàm constructor của class trong javascript. Qua đó, ta thấy rằng nếu muốn làm việc với đối tượng thì các bạn nên sử dụng ES6 class, còn nếu sử dụng function thì cần xem kỹ vấn đề về prototype và chế độ strict mode.