JavaScript

Object Constructors trong JavaScript

Object Constructors trong JavaScript
Được viết bởi Minh Hoàng

Series lập trình JavaScript, ngôn ngữ lập trình linh động, thực thi phía client.

Object Constructors trong JavaScript

1. Object Constructor là gì?

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

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

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

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

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

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

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 »

Tham khảo w3schools.

Cảm ơn bạn đã theo dõi. Đừng ngần ngại hãy cùng thảo luận với chúng tôi!

Giới thiệu

Minh Hoàng

Xin chào, tôi là Hoàng Ngọc Minh, hiện đang làm BrSE, tại công ty Toyota, Nhật Bản. Những gì tôi viết trên blog này là những trải nghiệm thực tế tôi đã đúc rút ra được trong cuộc sống, quá trình học tập và làm việc. Các bài viết được biên tập một cách chi tiết, linh hoạt để giúp người đọc có thể tiếp cận một cách dễ dàng nhất. Hi vọng nó sẽ có ích hoặc mang lại một góc nhìn khác cho bạn[...]

1
Bình luận của bạn

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
Mới nhất Cũ nhất Thích nhiều nhất
trackback

[…] Ở bài viết trước Object Constructors trong JavaScript chúng ta đã biết rằng: không thể thêm property mới hay method mới cho một object […]

Object Constructors trong JavaScript

by Minh Hoàng Time to read: 9 min
1