属性提示符
Property Descriptor 属性描述符
这也是直接 对象名.属性 方式给对象添加一个属性的底层方法
Object.getOwnPropertyDescriptor(对象,属性名) 或Object.getOwnPropertyDescriptors(对象)可以得到一个属性的描述符
let obj = {
name: "zyl",
age: 20
}
console.log( Object.getOwnPropertyDescriptors(obj));
打印
configurable: true 该属性是否可以被修改
enumerable: true 该属性是否可以被枚举
value: “hc” 值
writable: true 该属性是否可以重新赋值
给对象添加属性(底层代码运行方式)
Object.defineProperty(对象,属性名,描述符) 添加单个属性
Object.defineProperties(对象,多个描述符)添加多个属性
let obj = {
name: "hc",
age: 18
}
//等同于obj.password="123";
Object.defineProperty(obj, "password", {
configurable: true,
enumerable: true,
value: "123",
writable: true
});
//一次性添加多个,也等同于
//obj.password1="12345";
//obj.password2="1234567";
Object.defineProperties(obj, {
password1: {
configurable: true,
enumerable: true,
value: "12345",
writable: true
},
password2: {
configurable: true,
enumerable: true,
value: "1234567",
writable: true
}
})
console.log(Object.getOwnPropertyDescriptors(obj));
存储器属性
当给对象中的属性添加了get()或set()方法时则该属性不再是一个普通属性,而是变成了存储器属性。
如果一个属性是一个存储器属性的时候:
- 读取该属性的时候 会运行get方法
- 修改/赋值该属性的时候 会运行set方法
let obj = {
}
Object.defineProperty(obj,"a",{
get(){
console.log("执行get方法");
},
set(){
console.log("执行set方法")
}
})
存储器最大的意义在于 控制属性的读取和赋值。可以用于规范属性的值(如:验证账号密码是否正确等)
如下代码通过存储器将密码判断封装使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
密码:<input type="text" id="entry">
<button id="login">登录</button>
<span id="response"></span>
</body>
<script>
let login = document.getElementById("login");
let response = document.getElementById("response");
let entry = document.getElementById("entry");
let user = verification();
login.onclick = () => {
user.psd = entry.value;
user.psd;
}
//封装登录验证
function verification() {
let user = {
count: 0,//登录失败次数
};
// console.log(user.psd=1);
Object.defineProperties(user, {
psd: {
get() {
return response.innerHTML = user.result;
},
set(val) {
if (val == 123456) {
user.result = "登录成功";
} else {
user.result = "登录失败";
this.count++;
}
if (this.count >= 3) {
user.result = "累计错误三次。请明天再来";
}
}
}
})
return user;
}
</script>
</html>