JavaScript hỗ trợ mở rộng các loại dữ liệu. Đối tượng JavaScript là một cách tuyệt vời để định nghĩa các loại dữ liệu tùy chỉnh.
Một đối tượng là một thể hiện chứa một tập hợp các cặp giá trị khóa. Không giống như các kiểu dữ liệu nguyên thủy, các đối tượng có thể biểu thị nhiều giá trị hoặc phức tạp và có thể thay đổi theo thời gian sống của chúng. Các giá trị có thể là giá trị vô hướng, hàm, thậm chí là mảng các đối tượng khác.
Tóm Tắt
Bộ khởi tạo đối tượng
Giống như các kiểu nguyên thủy, các đối tượng có cú pháp theo đúng nghĩa đen: cặp ngoặc xoắn ({và}). Sau đây là cú pháp định nghĩa một đối tượng.
var obj = {
Key1:value,
Key2: function() {
//khối_lệnh
},
Key3: [“content1”,” content2”]
}
Nội dung của một đối tượng được gọi là thuộc tính (hoặc thành phần) và thuộc tính bao gồm tên (hoặc khóa) và giá trị. Tên thuộc tính phải là chuỗi hoặc ký hiệu và các giá trị có thể là bất kỳ loại nào (bao gồm cả các đối tượng khác).
Giống như tất cả các biến JavaScript, cả tên đối tượng (có thể là biến thông thường) và tên thuộc tính đều phân biệt chữ hoa chữ thường. Ta truy cập các thuộc tính của một đối tượng bằng cách sử dụng toán tử dấu chấm
Cú pháp:
objectName.propertyName
Ví dụ:
var
human=
{
firstname:
"Long"
,
lastname:
"Dang"
,
func:
function
(){
return
"Hi V1Study!!"
},
};
//truy cập các member của đối tượng
console.
log(
human.
firstname)
console.
log(
human.
lastname)
console.
log(
human.
func())
Output:
Long Dang Hi V1Study!!
Trong ES6 ta có thể đưa 1 biến nào đó làm thuộc tính của đối tượng.
Thí dụ
var
a=
'abc'
var
obj=
{
a}
console.
log(
obj.
a)
Đoạn code trên định nghĩa một đối tượng có tên obj và có 1 thuộc tính là a, với a là biến được khai báo trước đó.
Hàm tạo Object()
JavaScript cung cấp một hàm tạo đặc biệt gọi là Object() để tạo thể hiện của đối tượng. Object() sẽ kết hợp với toán tử new để tạo một thể hiện của đối tượng.
Cú pháp:
var obj = new Object(); obj.prop = value; Hoặc: obj["prop"] = value
Sau đây là cú pháp để truy cập vào một thuộc tính:
objectName.tên_thuộc_tính Hoặc: objectName["tên_thuộc_tính"]
Ví dụ
//Định nghĩa đối tượng
var
mySubject=
new
Object
();
mySubject.
name=
"PHP"
;
mySubject.
numberSession=
30
;
mySubject.
money=
3000000
;
//Truy cập thành phần của đối tượng
console.
log(
mySubject[
"name"
])
console.
log(
mySubject[
"numberSession"
])
console.
log(
mySubject[
"money"
])
Ouptput:
PHP 30 3000000
Các thuộc tính mà chưa được gán của một đối tượng sẽ được coi là không tồn tại.
Ví dụ
var
myCar=
new
Object
();
myCar.
make=
"Ford"
;
console.
log(
myCar[
"model"
])
Kết quả:
undefined
Lưu ý: Tên thuộc tính đối tượng có thể là bất kỳ chuỗi JavaScript hợp lệ hoặc bất kỳ dữ liệu gì có thể được chuyển đổi thành chuỗi, bao gồm cả chuỗi rỗng. Tuy nhiên, bất kỳ tên thuộc tính nào không phải là định danh JavaScript hợp lệ (ví dụ: tên thuộc tính có dấu cách hoặc dấu gạch nối hoặc bắt đầu bằng số) thì chỉ có thể được truy cập bằng cách sử dụng ký hiệu dấu ngoặc vuông.
Các thuộc tính cũng có thể được truy cập bằng cách sử dụng một giá trị chuỗi được lưu trữ trong một biến. Nói cách khác, khóa thuộc tính của đối tượng có thể là một giá trị động, ví dụ như một biến chẳng hạn. Khái niệm nói trên được minh họa trong ví dụ sau.
Ví dụ
var
myCar=
new
Object
()
var
propertyName=
"make"
;
myCar[
propertyName]
=
"Ford"
;
console.
log(
myCar.
make)
Output:
Ford
Hàm tạo
Một đối tượng có thể được tạo bằng hai bước sau:
Bước 1: Định nghĩa loại đối tượng bằng cách viết hàm tạo function.
Cú pháp:
function tên_hàm() {
this.property_name = giá_trị
}
Từ khóa ‘this’ dùng để chỉ đối tượng hiện tại đang sử dụng và định nghĩa thuộc tính của đối tượng.
Bước 2: Tạo một thể hiện của đối tượng dùng từ khóa new.
var tên_đối_tượng= new tên_hàm() //Truy cập thuộc tính tên_đối_tượng.property_name
Từ khóa new gọi hàm tạo function và khởi tạo các khóa thuộc tính của hàm.
Ví dụ sử dụng hàm tạo function
function
Car
()
{
this
.
make=
"Ford"
this
.
model=
"F123"
}
var
obj=
new
Car
()
console.
log(
obj.
make)
console.
log(
obj.
model)
Output:
Ford F123
Ta hoàn toàn có thể thêm thuộc tính mới cho đối tượng đã được tạo từ trước. Ví dụ:
function
Car
()
{
this
.
make=
"Ford"
}
var
obj=
new
Car
()
obj.
model=
"F123"
console.
log(
obj.
make)
console.
log(
obj.
model)
Output:
Ford F123
Phương thức Object.create
Các đối tượng cũng có thể được tạo bằng phương thức Object.create(). Phương thức này cho phép ta tạo nguyên mẫu cho đối tượng mong muốn mà không phải định nghĩa hàm tạo function.
Ví dụ
var
roles=
{
type:
"Admin"
,
// Giá trị mặc định của thuộc tính
displayType:
function
()
{
//Hiển thị type
console.
log(
this
.
type);
}
}
//Tạo thể hiện của roles có tên super_role
var
super_role=
Object
.
create(
roles);
super_role.
displayType();
// Output: Admin
//Tạo thể hiện của roles có tên guest_role
var
guest_role=
Object
.
create(
roles);
guest_role.
type=
"Guest"
;
guest_role.
displayType();
// Output: Guest
Output:
Admin Guest
Hàm Object.assign()
Object.assign() được sử dụng để sao chép các giá trị của tất cả các thuộc tính riêng có thể đếm được từ một hoặc nhiều đối tượng nguồn vào một đối tượng đích. Nó sẽ trả về đối tượng đích.
Cú pháp:
Object.assign(đích, ...nguồn)
Ví dụ nhân bản một đối tượng:
"use strict"
var
obj=
{
name:
"Tom"
,
ID:
"E1001"
};
var
obj1=
Object
.
assign({},
obj);
console.
log(
obj1);
for
(
let
valin
obj1)
{
console.
log(
obj1[
val])
}
Output:
Tom E1001
Ví dụ gộp đối tượng:
var o1 = { a: 10 };
var o2 = { b: 20 };
var o3 = { c: 30 };
var obj = Object.assign(o1, o2, o3);
console.log(obj);
console.log(o1);
Output:
{ a: 10, b: 20, c: 30 }
{ a: 10, b: 20, c: 30 }
Lưu ý: Không giống như sao chép các đối tượng, khi các đối tượng được gộp thì đối tượng lớn hơn không lưu trữ bản sao mới của các thuộc tính. Thay vào đó, nó giữ tham chiếu đến các thuộc tính có trong các đối tượng ban đầu. Ví dụ sau đây giải thích khái niệm này.
var
o1=
{
a:
10
};
var
obj=
Object
.
assign(
o1);
obj.
a++
console.
log(
"Giá trị của 'a' trong đối tượng gộp sau khi tăng:"
)
console.
log(
obj.
a);
console.
log(
"Giá trị của 'a' trong đối tượng gốc sau khi tăng:"
)
console.
log(
o1.
a);
Output:
Giá trị của 'a' trong đối tượng gộp sau khi tăng: 11 Giá trị của 'a' trong đối tượng gốc sau khi tăng: 11
Xóa thuộc tính
Ta có thể xóa một thuộc tính của đối tượng bằng cách sử dụng toán tử delete.
Ví dụ
//Tạo một đối tượng có tên obj gồm 2 thuộc tính a và b.
var
obj=
new
Object
;
obj.
a=
5
;
obj.
b=
12
;
//Xóa thuộc tính a
delete
myobj.
a;
console.
log(
"a"
in
obj)
Output:
false
So sánh các đối tượng
Trong JavaScript thì đối tượng được hiểu là một kiểu tham chiếu. Hai đối tượng riêng biệt không bao giờ bằng nhau, ngay cả khi chúng có cùng các thuộc tính. Lý do là bởi chúng trỏ đến các địa chỉ bộ nhớ khác nhau. Chỉ những đối tượng chia sẻ cùng một tham chiếu mới giống nhau.
Ví dụ 1: Tham chiếu đối tượng khác nhau
var
a=
{
name:
"V1"
};
var
b=
{
name:
"V1"
};
console.
log(
a==
b)
// return false
console.
log(a
===
b)
// return false
Trong ví dụ trên, a và b là hai đối tượng riêng biệt đề cập đến hai địa chỉ bộ nhớ khác nhau, vậy nên chúng khác nhau, và kết quả là trả về false.
Ví dụ 2: Tham chiếu đối tượng đơn
var
val1=
{
name:
"Tom"
};
var
val2=
val1 console.
log(
val1==
val2)
// return true
console.
log(
val1===
val2)
// return true
Trong ví dụ trên, nội dung trong val1 được gán cho val2, tức là tham chiếu của các thuộc tính trong val1 được chia sẻ với val2. Vì vậy, chúng giống nhau, và kết quả là trả về true.
Đối tượng destructuring
Thuật ngữ destructuring có nghĩa là phá vỡ cấu trúc của một thực thể. Destructuring trong JavaScript cho phép trích xuất dữ liệu từ mảng hoặc đối tượng thành các biến khác nhau.
Ví dụ
var
emp=
{
name:
'John'
,
Id
:
3
}
var
{
name,
Id
}
=
emp console.
log(
name)
console.
log(
Id
)
Output:
John 3
