Object Javascript Và Những Điều Bạn Cần Biết
Như các bạn đã biết, Javascript có 5 kiểu dữ liệu Number, String, Boolean, Undefined và Null và còn 1 kiểu khác nữa đó là Object (kiểu dữ liệu phức hợp). Kiểu Object là kiểu được sử dụng nhiều nhất vì tính linh hoạt cực kỳ mạnh mẽ của nó trong việc xử lý dữ liệu. Chi tiết thế nào thì chúng ta cùng tìm hiểu nhé.
Objects trong JavaScript, cũng tương tự như những ngôn ngữ khác, có thể so sánh như đối tượng trong đời thường. Khái niệm của objects trong JavaScript có thể được hiểu như những đối tượng thực tế trong đời thực.
Trong JavaScript, một object là một thực thể độc lập, với thuộc tính và kiểu. Lấy cái tách làm ví dụ. Cái tách là một object có những thuộc tính của riêng nó. Một cái tách có màu sắc, thiết kế, trọng lượng, chất liệu tạo ra nó, vân vân... Tương tự như vậy, JavaScript objects có thể có những thuộc tính định nghĩa nên đặc tính của nó.
Đối tượng trong Javascript là một tập hợp các cặp khóa - giá trị, tương tự như bản đồ, từ điển, hay hash-table trong ngôn ngữ lập trình khác.
- Đối tượng là một tập hợp các thuộc tính
- Thuộc tính là một cặp khóa - giá trị chứa tên và giá trị
- Tên thuộc tính là một giá trị duy nhất có thể bị ép buộc vào một chuỗi và trỏ đến một giá trị
- Giá trị thuộc tính có thể là bất kỳ giá trị nào, bao gồm các đối tượng khác hoặc các hàm, được liên kết với tên/khóa
Đối tượng (Object) và những điều cần biết
1. Tạo đối tượng
Các bạn có 3 cách để khai báo đối tượng trong Javascript:
- Sử dụng từ khóa {}
- Sử dụng từ khóa
new Object()
- Sử dụng phương thức static
Dưới đây là ví dụ về tạo ra đối tượng rỗng trong Js:
// literal
const dog = { }
// constructor
const cat = new Object();
// static method
const horse = Object.create({ })
2. Nhận và thiết đặt thuộc tính (Get and Set Properties)
Bây giờ chúng ta đã có 1 đối tượng trống, chúng ta cần thêm các thuộc tính vào nó bằng cách sử dụng các trình truy cập (accessors).
Tên thuộc tính hợp lệ bao gồm chữ cái, số, kí tự,.. có thể ép thành một chuỗi, nhưng không được sử dụng các từ dành riêng như function, var, return, .v.v.
get = object.property;
object.property = set;
Kể từ ES6, chúng ta có một cách viết tắt thuận tiện để thiết lập các thuộc tính:
let hello;
let world;
// Old way
const obj = {
hello: hello,
world: world
}
// Modern way
const obj = {
hello,
world,
}
Sử dụng một biến hoặc biểu thức làm tên thuộc tính bằng cách đặt nó trong dấu ngoặc [] - đây được gọi là thuộc tính được tính toán
const x = 'khoa';
const obj = {
[x]: 07
}
obj.khoa // 07
Thuộc tính của đối tượng có thể được xóa với từ khóa delete
delete obj.hello;
delete obj.world;
3. 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. Một phương thức là một hàm liên kết với một object, hoặc, có thể nói phương thức là một thuộc tính của object có giá trị là một hàm. Phương thức được định nghĩa giống như cách định nghĩa hàm, ngoài trừ việc chúng phải được gán như là thuộc tính của một object.
Thường các phương thức được định nghĩa qua một hàm khởi tạo đối tượng. Ví dụ:
//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("Khoa", 19);
p.changeName("Vân");
//Giờ p.name bằng "Vân"
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 2020 - this.age;
}
var p = new person("Khoa", 19);
document.write(p.yearOfBirth());
// Outputs 2001
4. 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
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);
5. Sử dụng this để tham chiếu tới đối tượng
Trong một đối tượng thông thường, this đề cập đến đối tượng mà nó được định nghĩa. Ví dụ:
const obj = {
username: 'Khoa',
hello() {
console.log(`My name is ${this.username}`)
}
}
obj.hello(); // My name is Khoa
6. So sánh Objects
Trong JavaScript những object là kiểu tham chiếu. Hai đối tượng tách biệt không bao giờ bằng nhau, thậm chí nếu chúng có cùng những thuộc tính. Chỉ khi nó so sánh với chính nó thì kết quả mới là true.
Ví dụ:
// Two variables, two distinct objects with the same properties
var fruit = {name: 'apple'};
var fruitbear = {name: 'apple'};
fruit == fruitbear; // return false
fruit === fruitbear; // return false
// Two variables, a single object
var fruit = {name: 'apple'};
var fruitbear = fruit; // assign fruit object reference to fruitbear
// here fruit and fruitbear are pointing to same object
fruit == fruitbear; // return true
fruit === fruitbear; // return true
fruit.name = 'grape';
console.log(fruitbear); // yields { name: "grape" } instead of { name: "apple" }
Constructor là gì?
Phương thức constructor là một phương thức đặc biệt dùng để khởi tạo 1 object và được tạo ở trong class.
Cú pháp:
constructor([arguments]) { ... }
Ví dụ:
class Polygon {
constructor() {
this.name = 'Polygon';
}
}
const poly1 = new Polygon();
console.log(poly1.name);
// expected output: "Polygon"
Chỉ có duy nhất 1 phương thức đặc biệt tên là "constructor" ở trong class. Có nhiều hơn 1 phương thức constructor ở trong class thì sẽ gây ra lỗi SyntaxError.
Một constructor có thể sử dụng từ khóa super để gọi đến constructor của class cha.
Nếu bạn không chỉ định 1 phương thức constructor thì constructor mặc định sẽ được sử dụng
Một ví dụ nữa sử dụng phương thức constructor:
class Square extends Polygon {
constructor(length) {
// Here, it calls the parent class' constructor with lengths
// provided for the Polygon's width and height
super(length, length);
// Note: In derived classes, super() must be called before you
// can use 'this'. Leaving this out will cause a reference error.
this.name = 'Square';
}
get area() {
return this.height * this.width;
}
set area(value) {
this.area = value;
}
}
