Tìm hiểu các thuộc tính đối tượng trong JavaScript

Các thuộc tính là phần quan trọng nhất của bất kỳ đối tượng JavaScript nào.

Các thuộc tính JavaScript

Thuộc tính là các giá trị được liên kết với một đối tượng JavaScript. Một đối tượng JavaScript 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ố chỉ được đọc.

Truy cập thuộc tính JavaScript

Cú pháp để truy cập thuộc tính của một đối tượng là:

objectName.property          // person.age

hoặc là

objectName["property"]       // person["age"]

hoặc là

objectName[expression]       // x = "age"; person[x]

Biểu thức phải đo lường, đánh giá cho một tên thuộc tính.

ví dụ 1

person.firstname + " is " + person.age + " years old.";
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>

<p>There are two different ways to access an object property:</p>
<p>You can use .property or ["property"].</p>

<p id="demo"></p>

<script>
var person = {
firstname:"John",
lastname:"Doe",
age:50,
eyecolor:"blue"
};

document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

Ví dụ 2

person["firstname"] + " is " + person["age"] + " years old.";
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>

<p>There are two different ways to access an object property:</p>
<p>You can use .property or ["property"].</p>

<p id="demo"></p>

<script>
var person = {
firstname:"John",
lastname:"Doe",
age:50,
eyecolor:"blue"
};

document.getElementById("demo").innerHTML = person["firstname"] + " is " + person["age"] + " years old.";
</script>

</body>
</html>

JavaScript for … trong Vòng lặp

JavaScript for … trong các vòng lặp câu lệnh thông qua các thuộc tính của một đối tượng.

Cú pháp

for (variable in object) {
  code to be executed
}

Khối code bên trong vòng lặp for … in sẽ được thực thi một lần cho mỗi thuộc tính. Vòng lặp thông qua các thuộc tính của một đối tượng:

Ví dụ

var person = {fname:"John", lname:"Doe", age:25};

for (x in person) {
txt += person[x];
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>

<p id="demo"></p>

<script>
var txt = "";
var person = {fname:"John", lname:"Doe", age:25};
var x;
for (x in person) {
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

Thêm thuộc tính mới

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 đối tượng người đã tồn tại – sau đó bạn có thể cung cấp cho nó các thuộc tính mới:

Ví dụ

person.nationality = "English";
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>

<p>You can add new properties to existing objects.</p>

<p id="demo"></p>

<script>
var person = {
firstname:"John",
lastname:"Doe",
age:50,
eyecolor:"blue"
};

person.nationality = "English";
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.nationality + ".";
</script>

</body>
</html>

Bạn không thể sử dụng các từ dành riêng cho tên thuộc tính (hoặc phương thức). Quy tắc đặt tên JavaScript được áp dụng.

Xóa thuộc tính

Từ khóa delete sẽ xóa một thuộc tính từ một đối tượng:

Ví dụ

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
delete person.age;   // or delete person["age"];
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>

<p>You can delete object properties.</p>

<p id="demo"></p>

<script>
var person = {
firstname:"John",
lastname:"Doe",
age:50,
eyecolor:"blue"
};

delete person.age;
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

Từ khóa delete sẽ xóa cả giá trị của thuộc tính và chính thuộc tính đó. Sau khi xóa, thuộc tính không thể được sử dụng trước khi nó được thêm lại.

Toán tử delete (xóa) được thiết kế để được sử dụng trên các thuộc tính đối tượng. Nó không có tác dụng đối với các biến hoặc các hàm. Toán tử xóa không nên được sử dụng trên các thuộc tính đối tượng JavaScript được xác định trước. Nó có thể làm hỏng ứng dụng của bạn.

Giá trị thuộc tính

Tất cả các thuộc tính có một tên. Ngoài ra chúng cũng có một giá trị.

Các thuộc tính khác là: enumerable, configurable, và writable (liệt kê, cấu hình và ghi được).

Các thuộc tính này xác định làm thế nào thuộc tính có thể được truy cập (nó có thể đọc được không?, Nó có thể ghi được không?). Trong JavaScript, tất cả các thuộc tính có thể được đọc, nhưng chỉ có thể thay đổi thuộc tính giá trị (và chỉ khi thuộc tính có thể ghi).

(ECMAScript 5 có các phương thức cho cả nhận và đặt tất cả các thuộc tính thuộc tính)

Thuộc tính nguyên mẫu

Các đối tượng JavaScript kế thừa các thuộc tính của nguyên mẫu của chúng.

Từ khóa delete không xóa thuộc tính được kế thừa, nhưng nếu bạn xóa 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.

 

 

 

 

 

 

 

 

 

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *