1. Object Constructor trong JavaScript là gì?

Constructor bản chất cũng giống như một hàm bình thường. Nhưng nó được kết hợp với new để tạo ra một đối tượng cụ thể. Nó sẽ có 2 quy tắc mà ta cần lưu ý:

Tên Object constructor nê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 .

Ta có thể hiểu constructor như là một khuôn mẫu có sẵn. Ví dụ như việc học toán cần có công thức thì ở đây constructor chính là công thức. Khi chúng ta giải toán thì các bài toán sẽ có đặc điểm chung để giải nó.

Ví dụ:

// Khởi tạo constructor
function Person(name,age,color)
{
    this.name = name;
    this.age= age;
    this.color = color;
}
// Tạo đối tượng PersonThanh
var PersonThanh= new Person("Thanh",19,"Black");
//Tạo đối tượng PersonNam
var PersonNam= new Person("Nam",19,"White");
docunment.write(PersonThanh.name);

Ở đây ta có

Việc khởi tạo constructor bằng function Person gồm 3 tham số truyền vào là name , age , color
Dùng this để trỏ các tham số đến chính nó
Tạo đối tượng PersonThanh bằng từ khóa new và constructor Person(name,age,color)
Tạo đối tượng PersonNam bằng từ khóa new và constructor Person(name,age,color)
Kiểm tra trực tiếp từng thuộc tính bằng docunment.write(PersonThanh.name); (có thể làm tương tự với từng thuộc tính còn lại)

2. Công dụng của Constructor trong JavaScript

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. Việc sử dụng constructor giúp cho object được đánh dấu rõ ràng. Thêm vào đó việc dùng constructor cũng làm giảm code đi rất nhiều. Xem ví dụ sau nhé:

//Khởi tạo đối tượng PersonThanh
var PersonThanh= {
name: 'Thanh',
age: 19,
color: 'White'
};
//Khởi tạo đối tượng PersonNam
var PersonNam= {
name: 'Nam',
age: 20,
color: 'Black'
};
//Khởi tạo đối tượng PersonSon
var PersonSon= {
name: 'Son',
age: 21,
color: 'Blue'
};

Đó là chỉ với 3 đối tượng thôi còn nếu mà với 100 hay 1000 đối tượng thì rất là mệt. Vì vậy mà ta chỉ cần khởi tạo một constructor ban đầu và sau đó tạo mỗi đối tượng trong 1 dòng lệnh (như ví dụ phần trên).

Cùng với đó, 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 .

3. Sử dụng This và Contructor trong JavaScript

Từ khoá this được sử dụng để tham chiếu tới đối tượng hiện tại đang sử dụng. Từ khoá this có thể được sử dụng trong phương thức của đối tượng:

var num = {
  first: 1,
  second: 2,
  third: 3,
  average: function () {
    return (this.first + this.second + this.third) / 3;
  }
};

Hoặc trong khi định nghĩa hàm constructor :

function ThreeNumbers () {
    this.first: 1;
    this.second: 2;
    this.third: 3;
    this.average: function () {
        return (this.first + this.second + this.third) / 3;
    }
}

var myNumber = new ThreeNumbers(2, 3, 5);
myNumber.average();

4. Thêm thuộc tính cho constructor trong JavaScript

Ta không thể thêm thuộc tính mới vào phương thức khởi tạo đối tượng giống như cách thêm thuộc tính mới vào đối tượng hiện có. Để thêm một thuộc tính mới vào một hàm tạo, bạn phải thêm nó vào hàm tạo.

<script>

// Hàm tạo cho các đối tượng Person
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.nationality = "English";
}

// Tạo 2 đối tượng Person
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Hiển thị
document.write
("My father is " + myFather.nationality + ". My mother is " + myMother.nationality); 
</script>

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 đó.

5. Thêm phương thức cho Constructor trong JavaScript

Hàm khởi tạo của bạn cũng có thể xác định các phương thức. Ta không thể thêm một phương thức mới vào một phương thức khởi tạo đối tượng giống như cách thêm một phương thức mới vào một đối tượng hiện có. Việc thêm các phương thức vào một phương thức khởi tạo đối tượng phải được thực hiện bên trong hàm khởi tạo.

<script>
// Hàm tạo cho các đối tượng Person
function Person(firstName,lastName,age,eyeColor) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
    this.lastName = name;
  }
}
// Tạo đối tượng Person
const myMother = new Person("Sally","Nguyễn",48,"green");

// Thay đổi name
myMother.changeName("Phùng");

// Hiển thị name
document.write
("Họ của mẹ tôi là " + myMother.lastName);
</script>

6. Khởi tạo đối tượng từ constructor trong JavaScript

Đơn giản ta chỉ cần khởi tạo với từ khóa new là xong.

// 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);

Js có các hàm tạo dựng sẵn cho các đối tượng gốc:

<script>
const x1 = new String();   
const x2 = new Number();  
const x3 = new Boolean();  
const x4 = new Object();  
const x5 = new Array();   
const x6 = new RegExp();   
const x7 = new Function(); 
const x8 = new Date();     

// Hiển thị loại của tất cả các đối tượng
document.write
("x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>" +
"x8: " + typeof x8 + "<br>");
</script>

Lưu ý

Đối tượng Math() không có trong danh sách. Math là một đối tượng toàn cục. Từ khóa new không thể được sử dụng trên Math .

Hàm Constructor trong JavaScript