js的属性提示符与存储器属性

news/2024/7/10 23:59:40 标签: javascript, es6

属性提示符

Property Descriptor 属性描述符
这也是直接对象名.属性方式给对象添加一个属性的底层方法

Object.getOwnPropertyDescriptor(对象，属性名) 或Object.getOwnPropertyDescriptors（对象）可以得到一个属性的描述符

javascript">        let obj = {
            name: "zyl",
            age: 20
        }
        console.log( Object.getOwnPropertyDescriptors(obj));

打印
在这里插入图片描述

configurable: true 该属性是否可以被修改
enumerable: true 该属性是否可以被枚举
value: “hc” 值
writable: true 该属性是否可以重新赋值

给对象添加属性（底层代码运行方式）
Object.defineProperty(对象，属性名，描述符) 添加单个属性
Object.defineProperties（对象，多个描述符）添加多个属性

javascript">        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方法

javascript">        let obj = {
        }
        Object.defineProperty(obj,"a",{
            get(){
                console.log("执行get方法");
            },
            set(){
                console.log("执行set方法")
            }
        })

在这里插入图片描述

存储器最大的意义在于控制属性的读取和赋值。可以用于规范属性的值（如：验证账号密码是否正确等）

如下代码通过存储器将密码判断封装使用

javascript"><!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>