Trình tạo đối tượng JavaScript
Ví dụ
// Hàm định nghĩa đối tượng person function Person(first, last, age, eye){ this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; } // tạo một đối tượng person const person1 = new Person("John","Doe",50,"blue"); // Hiển thị đối tượng document.getElementById('demo').innerHTML = person1.firstName + " năm nay " + person1.age + " tuổi.";
Các loại đối tượng
Các ví dụ từ các bài trước là một hạn chế. Nó chỉ tạo ra các đối tượng đơn lẻ và thủ công.
Đôi khi chúng ta cần một "bản thiết kế" để tạo ra nhiều đối tượng cùng một "kiểu".
Cách để tạo "kiểu đối tượng" như thế này, là sử dụng một hàm tạo đối tượng.
Trong ví dụ trên, function Person() là một hàm tạo đối tượng.
Các đối tượng cùng kiểu được tạo bằng cách gọi hàm khởi tạo với từ khóa new.
Ví dụ
// tạo hai đối tượng person const person1 = new Person("John","Doe",50,"blue"); const person2 = new Person("Thanh","Hoa",20,"green");
Từ khóa this
Trong JavaScript, đối tượng gọi this chính là đối tượng "sở hữu" hàm.
Giá trị của this, khi được sử dụng trong một đối tượng, là chính đối tượng đó.
Trong một hàm tạo this không có giá trị. Nó là một thay thế cho đối tượng mới. Giá trị của this sẽ trở thành đối tượng mới khi một đối tượng mới được tạo.
this không phải là một biến. Nó là một từ khóa. Bạn không thể thay đổi giá trị của this.Thêm một thuộc tính vào một đối tượng
Thêm một thuộc tính mới vào một đối tượng hiện có thật dễ dàng.
Thuộc tính sẽ được thêm vào đối tượng person2. Không phải person1. (Cũng không phải đối tượng nào khác).
Thêm một phương thức vào một đối tượng
Thêm một phương thức mới vào một đối tượng hiện có thật dễ dàng.
Ví dụ
// Thêm phương thức mới với vào đối tượng person2.fullName = function(){ return this.firstName + " " + this.lastName; };
Phương thức sẽ được thêm vào đối tượng person2. Không phải person1. (Cũng không phải đối tượng nào khác).
Thêm thuộc tính vào hàm tạo
Chúng ta không thể thêm thuộc tính mới vào hàm khởi tạo đối tượng giống như cách chúng ta thêm thuộc tính mới vào một đối tượng hiện có.
Ví dụ
// không thể thêm một thuộc tính mới vào một hàm khởi tạo Person.nationality = "Việt Nam";
Để thêm một thuộc tính mới vào một hàm tạo, chúng ta phải thêm nó trực tiếp vào hàm tạo.
Ví dụ
function Person(first, last, age, eye){
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.nationality = "Việt Nam";
}
Thêm một phương thức vào một hàm tạo
Hàm khởi tạo của chúng ta cũng có thể xác định các phương thức.
Ví dụ
function Person(first, last, age, eye){
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.fullName = function(){
return this.firstName + " " + this.lastName;
}
}
Chúng ta cũng không thể thêm một phương thức mới vào một hàm khởi tạo đối tượng giống như cách chúng ta 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 hàm khởi tạo đối tượng phải được thực hiện bên trong hàm khởi tạo.
Chúng ta hãy xem ví dụ sau.
Ví dụ
function Person(first, last, age, eye){
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.changeName = function(name){
this.lastName = name;
}
}
Hàm changeName() sẽ gán giá trị của name cho thuộc tính lastName của người đó.
Bây giờ chúng ta có thể thay đổi giá trị cho thuộc tính lastName.
Hàm tạo JavaScript tích hợp
JavaScript có các hàm tạo dựng sẵn cho các đối tượng gốc.
Ví dụ
new String() // A new String object new Number() // A new Number object new Boolean() // A new Boolean object new Object() // A new Object object new Array() // A new Array object new RegExp() // A new RegExp object new Function() // A new Function object new Date() // A new Date object
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.Như chúng ta thấy ở trên, JavaScript có các phiên bản đối tượng của các kiểu dữ liệu nguyên thủy như String, Number và Boolean. Chúng ta không có lý do gì để tạo ra và làm cho các đối tượng phức tạp thêm. Giá trị ban đầu nhanh hơn nhiều.
Sử dụng các ký tự chuỗi "" thay vì new String().
Sử dụng các ký tự số 50 thay vì new Number().
Sử dụng các ký tự boolean true/false thay vì new Boolean().
Sử dụng các ký tự đối tượng {} thay vì new Object().
Sử dụng các ký tự mảng [] thay vì new Array().
Sử dụng các ký tự mẫu /()/ thay vì new RegExp().
Sử dụng biểu thức hàm function(){} thay vì new Function().
Ví dụ
var x1 = ""; // string var x2 = 0; // number var x3 = false; // boolean const x4 = {}; // Object object const x5 = []; // Array object const x6 = /()/; // RegExp object const x7 = function(){}; // function