Object Constructors trong JavaScript

Nội dung chính:

Object Constructor là gì?
Thêm property vào một object
Xóa property của một object
Thêm method vào một object
Thêm property vào một constructor
Thêm method vào một constructor
Tạo các đối tượng bằng constructor

1. Object Constructor là gì?

– Object Constructor là gì? Nó cũng giống như một hàm bình thường, nhưng được sử dụng cùng với toán tử new để tạo ra một đối tượng cụ thể.

Ví dụ:

[code language=”javascript”]// "Car" là một constructor function
function Car(in_brand, in_name, in_weight, in_color) {
this.brand = in_brand;
this.name = in_name;
this.weight = in_weight;
this.color = in_color;
}

// Tạo một đối tượng car
var myCar = new Car("Toyota", "Prius 2018", 850, "White");[/code] Try it »

Tên của constructor function nên bắt đầu bằng chữ cái HOA.

– Chúng ta cùng xét tiếp ví dụ sau, “red” là một object Color mới. Nhưng nó hoạt động như thế nào?

[code language=”javascript”]function Color(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}

var red = new Color(255, 0, 0);[/code]

– Như bạn có thể thấy, hàm Color constructor chỉ đơn thuần là lấy các tham số của nó và gắn chúng vào this object. Khi hàm dựng / hàm tạo (constructor) được gọi bởi từ khóa new, sẽ trả về một object mới là this của constructor này.

– Điều này có nghĩa là đoạn code trên tương đương với:

[code language=”javascript”]var red = {
r: 255,
g: 0,
b: 0
};[/code]

– Vậy tại sao chúng ta cần sử dụng constructor? Vì có 3 lý do quan trọng sau:

#1. Đầu tiên, việc sử dụng một constructor có nghĩa là tất cả các objects sẽ được tạo ra với cùng một cấu trúc cơ bản (basic structure), điều này làm giảm khả năng sai sót, khả năng có lỗi khi tạo ra nhiều đối tượng chung theo cách thủ công.

#2. Thứ hai, việc sử dụng một constructor có nghĩa là object được đánh dấu rõ ràng (object is explicitly marked) là một instance của Color. Điều này cho chúng ta biết chắc chắn rằng chúng ta đang nhận đúng loại dữ liệu để xử lý.

Ví dụ:

[code language=”javascript”]var red = new Color(255, 0, 0);

var blue = { r: 255, g: 0, b: 0 };

// Output: true
console.log(red instanceof Color);

// Output: false
console.log(blue instanceof Color);[/code] Try it »

#3. Thứ ba, việc sử dụng một constructor có nghĩa là chúng ta có thể dễ dàng gán các phương thức chuyên biệt cho prototype của constructor, và chúng sẽ ngay lập tức có sẵn cho tất cả các object được tạo bởi constructor.

Ví dụ:

[code language=”javascript”]function Color(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}

Color.prototype.getAverage = function () {
var total = this.r + this.g + this.b;
var avg = total / 3;
return parseInt(avg, 10);
};

var red = new Color(255, 0, 0);
var white = new Color(255, 255, 255);

// Output: 85
console.log(red.getAverage());

// Output: 255
console.log(white.getAverage());[/code] Try it »

Có thể bạn quan tâm: Object Prototypes trong JavaScript.

2. Thêm property vào một object

– Việc thêm thuộc tính mới vào đối tượng hiện có rất dễ dàng:

Ví dụ:

[code language=”javascript”]// Constructor function cho đối tượng Car
function Car(in_brand, in_name, in_weight, in_color) {
this.brand = in_brand;
this.name = in_name;
this.weight = in_weight;
this.color = in_color;
}

// Tạo 2 Car
var myCar = new Car("Toyota", "Prius 2018", 850, "White");
var friendCar = new Car("Ford", "Everest 2018", 900, "Grey");

// Thêm property "nation" cho object myCar
myCar.nation = "Japan";

// Hiển thị tên nước sản xuất xe
myCar.nation; // Japan
friendCar.nation; // undefined[/code] Try it »

– Thuộc tính mới “nation” được thêm vào đối tượng “myCar”, không được thêm vào đối tượng “friendCar”.

3. Xóa property của một object

– Sử dụng từ khóa delete để xóa thuộc tính khỏi đối tượng:

Ví dụ:

[code language=”javascript”]var car = {brand:"Toyota", name:"Prius 2018", weight:850, color:"White"};

delete car.weight;
// Hoặc:
// delete car["weight"];[/code] Try it »

4. Thêm method vào một object

– Việc thêm một phương thức mới vào đối tượng hiện có rất dễ dàng:

Ví dụ:

// Tạo 2 Car
var myCar = new Car("Toyota", "Prius 2018", 850, "White");
var friendCar = new Car("Ford", "Everest 2018", 900, "Grey");

// Thêm method "getFullName" cho object myCar
myCar.getFullName = function() {
return this.brand + " " + this.name;
};

myCar.getFullName(); // Toyota Prius 2018
friendCar.getFullName(); // ERROR: friendCar.getFullName is not a function[/code] Try it »

– Phương thức mới “getFullName” được thêm vào đối tượng “myCar”, không được thêm vào đối tượng “friendCar”.

5. Thêm property vào một constructor

– Bạn không thể thêm thuộc tính mới vào một object constructor giống như cách bạn thêm thuộc tính mới vào một object hiện có:

Ví dụ:

[code language=”javascript”]// Constructor function
function Car(in_brand, in_name, in_weight, in_color) {
this.brand = in_brand;
this.name = in_name;
this.weight = in_weight;
this.color = in_color;
}

// Tạo đối tượng myCar từ constructor Car
var myCar = new Car("Toyota", "Prius 2018", 850, "White");

// KHÔNG THỂ thêm property "nation" vào một "constructor function"
Car.nation = "Japan";

myCar.nation; // return undefined[/code] Try it »

– Nếu muốn thêm thuộc tính mới vào một constructor, bạn cần phải thêm nó trong constructor function:

Ví dụ:

// Tạo đối tượng myCar từ constructor Car
var myCar = new Car("Toyota", "Prius 2018", 850, "White");

myCar.nation; // Japan[/code] Try it »

Qua ví dụ này, các bạn có thể thấy thuộc tính của một object có thể có giá trị mặc định.

6. Thêm method vào một constructor

Tương tự như mục 5, bạn không thể thêm phương thức mới vào một object constructor giống như cách bạn thêm phương thức mới vào một object hiện có. Việc thêm các phương thức vào một constructor phải được thực hiện bên trong constructor function:

Ví dụ:

// Thêm phương thức trong "constructor function"
this.getFullName = function() {return this.brand + " " + this.name;};
}

// Tạo đối tượng myCar
var myCar = new Car("Toyota", "Prius 2018", 850, "White");

myCar.getFullName(); // Toyota Prius 2018[/code] Try it »

– Hoặc ví dụ khác:

Ví dụ:

// Thêm phương thức trong "constructor function"
this.changeColor = function (in_color) {
this.color = in_color;
}
}

// Tạo đối tượng myCar
var myCar = new Car("Toyota", "Prius 2018", 850, "White");

// Thay đổi màu xe
myCar.changeColor("Red");

myCar.color; // Red[/code] Try it »

7. Tạo các đối tượng bằng constructor

– JavaScript có xây dụng sẵn các constructors cho các đối tượng gốc (native objects):

Ví dụ:

[code language=”javascript”]var x1 = new Object(); // Tạo một object Object mới
var x2 = new String(); // Tạo một object String mới
var x3 = new Number(); // Tạo một object Number mới
var x4 = new Boolean(); // Tạo một object Boolean mới
var x5 = new Array(); // Tạo một object Array mới
var x6 = new RegExp(); // Tạo một object RegExp mới
var x7 = new Function(); // Tạo một object Function mới
var x8 = new Date(); // Tạo một object Date mới[/code] Try it »

Math() object không có trong danh sách này, vì Math là một global object. Không thể sử dụng từ khóa new trên Math.

– JavaScript các kiểu dữ liệu nguyên thủy cũng được xem như là object. Do đó, chúng ta không cần phải tạo ra các đối tượng phức tạp như cách sử dụng với từ khóa new, vì sử dụng giá trị nguyên thủy nhanh hơn nhiều.

Sử dụng object literals {} thay vì new Object().

Sử dụng string literals “” thay vì new String().

Sử dụng number literals 12345 thay vì new Number().

Sử dụng boolean literals true / false thay vì new Boolean().

Sử dụng array literals [] thay vì new Array().

Sử dụng pattern literals /()/ thay vì new RegExp().

Sử dụng function expressions () {} thay vì new Function().

Ví dụ:

[code language=”javascript”]var x1 = {}; // object
var x2 = ""; // string
var x3 = 0; // number
var x4 = false; // boolean
var x5 = []; // object (not array)
var x6 = /()/; // object
var x7 = function(){}; // function[/code] Try it »