Các đối tượng – Object
Các biến trong JavaScript
chứa các dữ liệu, các đối tượng cũng tương tự như vậy, nhưng nó chứa được nhiều giá trị. Hãy nghĩ một đối tượng là một danh sách các giá trị được viết theo cặp nameobject:value
Ví dụ sau tạo ra đối tượng lưu trong biến person
:
var person = { name: "John", age: 31, favColor: "green", height: 183 };
Các thuộc tính của đối tượng trên là name
, age
, favColor
, height
…
Truy cập đến thuộc tính đối tượng
Có 2 cách để truy cập đến thuộc tính đối tượng để lấy giá trị thuộc tính hoặc gán giá trị vào thuộc tính, ví dụ:
objectName.propertyName //Cách 1 objectName['propertyName'] //Cách 2
var person = { name: "John", age: 31, favColor: "green", height: 183 }; var x = person.age; var y = person['age'];
Khởi tạo đối tượng
Cách 1) Khởi tạo cố định
Cách thứ nhất là tạo bằng phương pháp cố định, là cách đã thực hiện ở trên (tạo đối tường và khởi tạo luôn các thuộc tính cần có)
var person = { name: "John", age: 42, favColor: "green" };
Cách 2) Khởi tạo bằng hàm tạo
Với cách thứ 2 này bạn khai báo một hàm gọi là hàm tạo rồi tạo ra đối tượng bằng cú pháp new hamtao()
Trong hàm tạo hoặc các hàm thuộc đối tượng, sử dụng từ khóa this để tham khảo đến đối tượng, thông qua nó truy cập các thuộc tính (ý nghĩa của this giống this trong Java, Php, C# …)
function person(name, age, color) { // Hàm khởi tạo this.name = name; // this tham khảo đến đối tượng cần tạo this.age = age; this.favColor = color; } var p1 = new person("John", 42, "green"); // tạo đối tượng var p2 = new person("Amy", 21, "red"); // tạo đối tượng document.write(p1.age); // Outputs 42 document.write(p2.name); // Outputs "Amy"
Phương thức trong đối tượng
Một đối tượng ngoài các thuộc tính ra nó còn chứa hàm gọi là phương thức, ví dụ truy cập một hàm
objectName.methodName()
Như bạn đã biết khi viết chuỗi bạn có sử dụng đến document.write()
thì write
chính là phương thức của đối tượng document
Phương thức thuộc về một đối tượng, đối tượng này được hàm tham khảo qua từ khóa this
Thường các phương thức được định nghĩa qua một hàm khởi tạo đối tượng.
//Hàm khởi tạo đối tượng function person(name, age) { this.name = name; this.age = age; this.changeName = function (name) { this.name = name; } } //Tạo đối tượng var p = new person("David", 21); p.changeName("John"); //Giờ p.name bằng "John"
Các phương thức bạn cũng có thể định nghĩa bên ngoài hàm khởi tạo, ví dụ
function person(name, age) { this.name= name; this.age = age; this.yearOfBirth = bornYear; //Gán phương thức bên ngoài } //Hàm bên ngoài hàm tạo, hàm này được gán vào đối tượng qua hàm tạo ở trên function bornYear() { return 2016 - this.age; } var p = new person("A", 22); document.write(p.yearOfBirth()); // Outputs 1994
Setter và Getter
Một thuộc tính của của đối tượng còn thiết lập nó là hàm setter
hoặc getter
, nếu là setter
nó chỉ được gọi qua toán tử gán giá trị cho nó, nếu là getter
thì chỉ được gọi khi truy cập lấy giá trị thuộc tính.
Hàm setter định nghĩa bằng cách cho thêm set
, hàm getter định nghĩa bằng cách cho thêm get
var obj = { age: 0, set ageInfo(age) { //Định nghĩa setter console.log('setter - ' + age); this.age = age; }, get ageInfo() { //Định nghĩa getter console.log('getter'); return "Thông tin tuổi: " + this.age; } }; obj.ageInfo = 25; //Gán -> Tự động gọi settter alert(obj.ageInfo); //Không phải gán -> Tự động gọi getter
Tạo Setter/Getter trong hàm tạo
Trong trường hợp muốn định nghĩa setter / getter
trong hàm tạo đối tượng thì bạn cần định nghĩa theo nguyên tắc thêm một thuộc tính vào đối tượng đã có với lệnh Object.defineProperty
//Một đối tượng đã có tên ob, thêm cho nó setter, getter có tên namepro Object.defineProperty(ob, 'namepro', { set: function(x) { //code setter ở đây }, get: function() { //code getter ở đây } });
Ví dụ trên định nghĩa lại trong hàm tạo:
function person(age) { this.age = 0; Object.defineProperty(this, 'ageInfo', { set : function (age) { console.log('setter - ' + age); this.age = age; }, get : function () { console.log('getter'); return "Thông tin tuổi: " + this.age; } }); } var obj = new person(0); obj.ageInfo = 25; alert(obj.ageInfo);