Object Constructors trong JavaScript
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; // undefinedTry 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 functionTry 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 undefinedTry 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; // JapanTry 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 2018Try 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; // RedTry 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ớiTry 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(){}; // functionTry it »
[…] Ở 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 […]