Thuộc tính accessor giúp chúng tôi triển khai các hàm getter và setter trong JavaScript. Chúng thực thi một hàm về nhận hoặc đặt giá trị.
Có bốn thuộc tính của thuộc tính trình truy cập -
- nhận được - Nó được gọi khi một thuộc tính được đọc. Nó không có bất kỳ đối số nào /
- bộ - Nó được gọi khi một thuộc tính được thiết lập. Chỉ cần một đối số.
- có thể liệt kê - Cho phép đối tượng có thể lặp lại khi được đặt thành true.
- có thể định cấu hình - Khi được đặt thành false, nó sẽ không cho phép xóa thuộc tính hoặc thay đổi giá trị của nó.
Sau đây là mã cho thuộc tính trình truy cập và các thuộc tính của nó -
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>Accessor property and its attributes</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to use set and get to modify and display person object properties</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let person = {
name: "Rohan",
age: 22,
occupation: "Student",
get fullname() {
return this.name;
},
set job(occupation) {
this.occupation = occupation;
},
};
BtnEle.addEventListener("click", () => {
resEle.innerHTML =
"Name = " + person.fullname + " : Occupation = " + person.occupation;
resEle.innerHTML += "<br>After modifying occupation property <br>";
person.occupation = "Developer";
resEle.innerHTML += "New Occupation = " + person.occupation;
});
</script>
</body>
</html> Đầu ra
Khi nhấp vào nút 'BẤM VÀO ĐÂY' -
