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

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

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?

function Color(r, g, b) {
    this.r = r;
    this.g = g;
    this.b = b;
}

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

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

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

– 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ụ:

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

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

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

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

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

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

var car = {brand:"Toyota", name:"Prius 2018", weight:850, color:"White"};

delete car.weight; 
// Hoặc:
// delete car["weight"];

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

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

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

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

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

// 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;
    this.nation = "Japan";	// Thêm thuộc tính mới trong "constructor function"
}

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

myCar.nation;		// Japan

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

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

Try it »

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

Ví dụ:

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

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

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

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

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

Try it »