THÔNG DỤNG
OOP
ES6
ES(X)
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Constructor trong Javascript (function và class constructor)

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.

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.

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

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à:

  • 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:

Person("Cường")

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.

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top