1. Thuộc tính – Properties trong JavaScript là gì?
Thuộc tính là phần quan trọng nhất của bất kỳ đối tượng Js nào.
Thuộc tính là các giá trị được liên kết với một đối tượng JavaScript. Đối tượng Js là một tập hợp các thuộc tính không có thứ tự. Các thuộc tính thường có thể được thay đổi, thêm và xóa, nhưng một số thuộc tính chỉ được đọc.
Có hai loại thuộc tính đối tượng:
- Data Properties: Thuộc tính dữ liệu
- Accesor Properties: Thuộc tính trình truy cập
2. Truy cập vào thuộc tính trong JavaScript
Cú pháp để truy cập vào thuộc tính là:
objectName.property // person.age
hoặc
objectName["property"] // person["age"]
hoặc
objectName[expression] // x = "age"; person[x]
Lưu ý
expression (biểu thức) cần trả về giá trị là tên của một thuộc tính.
Ví dụ:
<script>
const person = {
firstname: "Thành",
lastname: "Nguyễn",
age: 19,
eyecolor: "blue"
};
document.write(person.firstname + " đã " + person.age + " tuổi.");
</script>
Hoặc bạn cũng có thể sử dụng dấu ngoặc vuông hoặc thậm chí một biến để truy cập vào thuộc tính của Object:
<script>
const person = {
firstname: "Thành",
lastname: "Nguyễn",
age: 19,
eyecolor: "blue"
};
document.write(person["firstname"] + " đã " + person["age"] + " tuổi.");
</script>
3. Vòng lặp for…in
Vòng lặp for…in trong Js có thể dùng để duyệt qua các thuộc tính của một đối tượng.
Vòng lặp for … in sẽ lặp qua các thuộc tính của Object. Đoạn code bên trong vòng lặp sẽ được thực thi một lần cho mỗi thuộc tính của Object đến khi hết thì ngừng vòng lặp.
Cú pháp:
for (variable in object) {
đoạn mã cần thực thi
}
Ví dụ:
<script>
const person = {
fname:"Thành",
lname:"Nguyễn",
age:19
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
}
document.write(txt);
</script>
4. Thêm và Xóa thuộc tính trong đối tượng
Bạn có thể thêm các thuộc tính mới vào một đối tượng hiện có bằng cách chỉ cần cho nó một giá trị. Giả sử rằng có một đối tượng person đã tồn tại, bạn có thể thêm vào nó những thuộc tính mới:
<script>
const person = {
firstname: "Thành",
lastname: "Nguyễn",
age: 19,
eyecolor: "blue"
};
person.nationality = "English";
document.write
(person.firstname + " thích " + person.nationality + ".");
</script>
Từ khóa delete giúp xóa một thuộc tính khỏi đối tượng. Ví dụ:
<script>
const person = {
firstname: "Thành",
lastname: "Nguyễn",
age: 19,
eyecolor: "blue"
};
delete person.age;
document.write
(person.firstname + " is " + person.age + " years old.");
</script>
Lưu ý
- Từ khóa delete sẽ xóa cả thuộc tính và giá trị của thuộc tính được xóa.
- Sau khi delete bạn không thể sử dụng thuộc tính đã xóa.
- Delete được thiết kế để sử dụng cho các thuộc tính của đối tượng. Nên nó sẽ không ảnh hưởng đến biến và function.
5. Các đặc điểm của thuộc tính
Tất cả các thuộc tính đều có tên, và nó cũng có một giá trị đi kèm. Các giá trị là một trong những đặc điểm (attributes) của thuộc tính. Các đặc điểm này sẽ định nghĩa các cách mà thuộc tính được truy cập. Các đặc điểm như:
- enumerable : có thể đếm được
- configurable : có thể cấu hình được
- writable : có thể ghi được
Trong Js, tất cả các đặc điểm này đều có thể đọc, nhưng chỉ có đặc điểm giá trị là có thể thay đổi (đương nhiên là chỉ khi nào thuộc tính đó có thể ghi được).
Cùng với đó các đối tượng Js kế thừa thuộc tính của nguyên mẫu. Khi sử dụng từ khóa delete để xóa nó sẽ không xóa thuộc tính kế thừa. Nhưng nếu ta xóa một thuộc tính nguyên mẫu, nó sẽ ảnh hưởng đến tất cả các đối tượng được kế thừa từ nguyên mẫu.
