constructor là một phương thức đặc biệt của một class dùng để khởi tạo đối tượng của class đó. Trong bài viết này chúng ta sẽ cùng nhau tìm hiểu về Object constructor trong JavaScript nhé.
Object constructor trong JavaScript là gì?
Constructor cũng giống như một hàm thông thường nhưng có 2 quy ước các bạn cần lưu ý:
- Tên
Object constructornên bắt đầu bằng chữ hoa. - Chúng nên được khởi tạo bằng cách dùng từ khóa
new.
Ví dụ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// Constructor function function DongVat(name, so_chan) { this.name = name; this.so_chan = so_chan; } // Khởi tạo đối tượng con trâu let conTrau = new DongVat('Con Trau', 4); console.log(conTrau.name); // Con Trau console.log(conTrau.so_chan); // 4 // Khởi tạo đối tượng con gà let conGa = new DongVat('Con Ga', 2); console.log(conGa.name); // Con Ga console.log(conGa.so_chan); // 2 |
Các bạn có thể hiểu constructor ở như như một khuôn mẫu, ví dụ như xây nhà thì phải có bản vẽ. Thì ở đây constructor chính là bản vẽ đó. Về sau khi chúng ta xây nhà theo bản vẽ này thì các ngôi nhà này đều có những đặc điểm chung của bản vẽ.
Quay lại với ví dụ trên, tôi đã tạo 1 Object constructor là DongVat và có 2 đối số là name (tên động vật) và so_chan(số chân). Và bên dưới tôi khởi tạo 2 đối tượng là conTrau và conGa. Do hai đối tượng này đều được khởi tạo từ constructor DongVat nên cả hai đối tượng này đều có những thuộc tính của constructor DongVat. Nếu các bạn dùng instanceof để kiểm tra 2 đối tượng này thì các bạn sẽ thấy rõ hơn:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// Constructor function function DongVat(name, so_chan) { this.name = name; this.so_chan = so_chan; } // Khởi tạo đối tượng con trâu let conTrau = new DongVat('Con Trau', 4); // Tạo một đối tượng thông thường let conGa = { name: 'Con Ga', so_chan: 2 }; console.log(conTrau instanceof DongVat); // return true console.log(conGa instanceof DongVat); // return false |
Lợi ích của Object constructor
Có một vài lợi ích mà chúng ta có thể kể đến như:
Lợi ích đầu tiên đó là khi sử dụng Object constructor thì các object được ra sẽ có cùng một cấu trúc cơ bản, điều này sẽ làm giảm khả năng sai sót cũng như code của chúng ta sẽ gọn gàng và dễ đọc hơn.
Thứ 2 việc sử dụng constructor khi bạn khởi tạo đối tượng thì đối tượng đó sẽ được đánh dấu là một instance của DongVat. Điều này có thể cho chúng ta biết chắc rằng chúng ta đã nhận đúng loại dữ liệu để xử lý.
Thứ 3, sử dụng constructor chúng ta có thể gán các phương thức chuyên biệt cho đối tượng thông qua prototype của constructor, và các phương thức này sẽ có sẵn cho các đối tượng được tạo từ constructor.
Thêm thuộc tính cho constructor
Bạn có thể thêm nhiều thuộc tính cho constructor function bằng cách gán giá trị cho nó:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Constructor function function DongVat(name, so_chan) { this.name = name; this.so_chan = so_chan; this.property = 'example'; ... } // Khởi tạo đối tượng con trâu let conTrau = new DongVat('Con Trau', 4); conTrau.type = 'Gia xúc'; // Thêm thuộc tính cho đối tượng đã khởi tạo console.log(conTrau.type); // Gia xúc |
Những thuộc tính được thêm trong constructor function là những thuộc tính chung. Bất kỳ một đối tượng nào được tạo từ constructor đều có. Còn những thuộc tính được thêm vào cho đối tượng thì chỉ có tác dụng trên đối tượng đó.
Bạn không thể thêm một thuộc tính mới cho 1 constructor ở bên ngoài được. Ví dụ:
|
1 2 3 4 5 6 7 8 9 10 |
// Constructor function function DongVat(name, so_chan) { this.name = name; this.so_chan = so_chan; } // Khởi tạo đối tượng con trâu let conTrau = new DongVat('Con Trau', 4); DongVat.type = 'Gia xúc'; // Không thể thêm thuộc tính cho constructor DongVat khi ở bên ngoài hàm console.log(conTrau.type); // undefine |
Thêm phương thức cho constructor trong JavaScript
Ngoài thuộc tính ra thì chúng ta cũng có thể thêm phương thức cho constructor nữa:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Constructor function function DongVat(name, so_chan) { this.name = name; this.so_chan = so_chan; this.getName = function () { return this.name; } } // Khởi tạo đối tượng con trâu let conTrau = new DongVat('Con Trau', 4); console.log(conTrau.getName()); // Con Trau |
Hoặc bạn cũng có thể thêm mới một phương thức cho đối tượng được khởi tạo từ constructor:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Constructor function function DongVat(name, so_chan) { this.name = name; this.so_chan = so_chan; } // Khởi tạo đối tượng con trâu let conTrau = new DongVat('Con Trau', 4); conTrau.getName = function () { return conTrau.name; } console.log(conTrau.getName()); // Con Trau |
Khởi tạo đối tượng từ constructor
Đơn giản chỉ cần khởi tạo với từ khóa new:
|
1 2 3 4 5 6 7 8 |
// Constructor function function DongVat(name, so_chan) { this.name = name; this.so_chan = so_chan; } let conTrau = new DongVat('Con Trau', 4); let conGa = new DongVat('Con Ga', 2); |
Trong JavaScript có xây dựng sẵn nhiều constructor như:
|
1 2 3 4 5 6 7 8 |
new String() // Tạo một đối tượng chuỗi new Number() // Tạo một đối tượng number new Boolean() // Tạo một đối tượng boolean new Object() // Tạo một đối tượng new Array() // Tạo một đối tượng array new RegExp() // Tạo một đối tượng RegExp new Function() // Tạo một đối tượng function new Date() // Tạo một đối tượng Date |
Nhưng trong thực tế chúng ta có thể sử dụng giá trị nguyên thủy sẽ nhanh hơn nhiều so với việc tạo mới đối tượng như trên:
Sử dụng {} thay vì
new Object()
Sử dụng “” thay vìnew String()
Sử dụng 112 thay vìnew Number()
Sử dụng [] thay vìnew Array()
Sử dụng /()/ thay vìnew RegExp()
Sử dụng () {} thay vìnew Function()
Kết luận
Trong bài viết này chúng ta đã cùng học về Object constructor trong Javascript. Nếu có bất kỳ thắc mắc gì về bài viết hãy để lại bình luận bên dưới nhé.
số lượng tham số của hàm này giới hạn là 3 tham số phải không ạ. Em viết đến tham số thứ 4 thì nó ra undefind. E tìm mà chưa thấy có ví dụ nào nhận lớn hơn 3 tham số cho function