“Vue Object.defineProperty”的版本间的差异

2024年7月28日 (日) 10:42的最新版本

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=11

ES6 往对象上添加属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person, 'age', {
            value:18
        })
        console.log(person);
    </script>
</body>
</html>

通过 Object.defineProperty 添加的属性遍历不到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男',
            // age:18
        }
         Object.defineProperty(person, 'age', {
             value:18
         })
        console.log(Object.keys(person));
        console.log(person);
    </script>
</body>
</html>

证明通过 Object.defineProperty 添加的属性不可枚举

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男',
            // age:18
        }
         Object.defineProperty(person, 'age', {
             value:18
         })
        //console.log(Object.keys(person));

        for (let key in person) {
            console.log('@', person[key]);
        }

        console.log(person);
    </script>
</body>
</html>

通过 enumerable:true 让 Object.defineProperty 添加的属性可枚举

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男',
            // age:18
        }
         Object.defineProperty(person, 'age', {
             value:18,
             enumerable:true //控制属性是否可以枚举，默认值是 false
         })
        //console.log(Object.keys(person));

        for (let key in person) {
            console.log('@', person[key]);
        }

        console.log(person);
    </script>
</body>
</html>

可以在 console 里改变 let 声明的对象属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男',
            age:18
        }
        //  Object.defineProperty(person, 'age', {
        //      value:18,
        //      enumerable:true, //控制属性是否可以枚举，默认值是 false
        //  })
        //console.log(Object.keys(person));

        for (let key in person) {
            console.log('@', person[key]);
        }

        console.log(person);
    </script>
</body>
</html>

在 console 里通过 person.age=19 给 person.age 赋新值，然后再在 console 中通过 person.age 输出，发现值改变了

通过 Object.defineProperty 给对象添加的属性值无法被改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男',
            // age:18
        }
         Object.defineProperty(person, 'age', {
             value:18,
             enumerable:true, //控制属性是否可以枚举，默认值是 false
         })
        console.log(Object.keys(person));

        for (let key in person) {
            console.log('@', person[key]);
        }

        console.log(person);
    </script>
</body>
</html>

在 console 里通过 person.age=19 给 person.age 赋新值，然后再在 console 中通过 person.age 输出，发现还是旧的值，person.age 的值并没有改变

通过 writable:true 让 Object.defineProperty 添加的属性可以被修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男',
            // age:18
        }
         Object.defineProperty(person, 'age', {
             value:18,
             enumerable:true, //控制属性是否可以枚举，默认值是 false
             writable:true
         })
        console.log(Object.keys(person));

        for (let key in person) {
            console.log('@', person[key]);
        }

        console.log(person);
    </script>
</body>
</html>

在 console 里通过 person.age=19 给 person.age 赋新值，然后再在 console 中通过 person.age 输出，发现值改变了

测试删除一般方式声明声明的对象属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男',
            age:18
        }
        //  Object.defineProperty(person, 'age', {
        //      value:18,
        //      enumerable:true, //控制属性是否可以枚举，默认值是 false
        //      writable:true //控制属性是否可以被修改，默认值是 false
        //  })
        console.log(Object.keys(person));

        for (let key in person) {
            console.log('@', person[key]);
        }

        console.log(person);
    </script>
</body>
</html>

在 console 里通过 delete person.age 删除对象的属性，然后再在 console 中通过 person 输出，发现对象的 age 属性被删除了

测试删除 Object.defineProperty 添加的对象属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男',
            //age:18
        }
         Object.defineProperty(person, 'age', {
             value:18,
             enumerable:true, //控制属性是否可以枚举，默认值是 false
             writable:true //控制属性是否可以被修改，默认值是 false
         })
        console.log(Object.keys(person));

        for (let key in person) {
            console.log('@', person[key]);
        }

        console.log(person);
    </script>
</body>
</html>

在 console 里通过 delete person.age 删除对象的属性，然后再在 console 中通过 person 输出，发现对象的 age 属性还在，没有被删除

测试删除 Object.defineProperty 和 configurable:true 添加的对象属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男',
            //age:18
        }
         Object.defineProperty(person, 'age', {
             value:18,
             enumerable:true, //控制属性是否可以枚举，默认值是 false
             writable:true, //控制属性是否可以被修改，默认值是 false
             configurable:true  //控制属性是否可以被删除，默认值是 false
         })
        console.log(Object.keys(person));

        for (let key in person) {
            console.log('@', person[key]);
        }

        console.log(person);
    </script>
</body>
</html>

在 console 里通过 delete person.age 删除对象的属性，然后再在 console 中通过 person 输出，发现对象的 age 属性被删除了

通过 Object.defineProperty 和 getter 添加的对象属性使属性实时获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男',
            //age:18
        }
         Object.defineProperty(person, 'age', {
            //  value:18,
            //  enumerable:true, //控制属性是否可以枚举，默认值是 false
            //  writable:true, //控制属性是否可以被修改，默认值是 false
            //  configurable:true //控制属性是否可以被删除，默认值是 false

            //当有人读取 person 的 age 属性时，get 函数(getter)就会被调用，且返回值就是 age 的值
            get:function(){
                return "hello"
            }
         })
        console.log(Object.keys(person));

        for (let key in person) {
            console.log('@', person[key]);
        }

        console.log(person);
    </script>
</body>
</html>

通过 Object.defineProperty 和 getter 添加的对象属性使属性实时联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let number = 18;
        let person = {
            name:'张三',
            sex:'男',
            //age:18
        }
         Object.defineProperty(person, 'age', {
            //  value:18,
            //  enumerable:true, //控制属性是否可以枚举，默认值是 false
            //  writable:true, //控制属性是否可以被修改，默认值是 false
            //  configurable:true //控制属性是否可以被删除，默认值是 false

            //当有人读取 person 的 age 属性时，get 函数(getter)就会被调用，且返回值就是 age 的值
            get:function(){
                console.log('正在读取 age 属性');
                return number;
            }
         })
        console.log(Object.keys(person));

        for (let key in person) {
            console.log('@', person[key]);
        }

        console.log(person);
    </script>
</body>
</html>

1.在 console 中观察 person.age 是18

2.在 console 中通过 number = 19

3.再输出 person.age，发现此时的 person.age 已经是 19 了

Object.defineProperty 和 setter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let number = 18;
        let person = {
            name:'张三',
            sex:'男',
            //age:18
        }
         Object.defineProperty(person, 'age', {
            //  value:18,
            //  enumerable:true, //控制属性是否可以枚举，默认值是 false
            //  writable:true, //控制属性是否可以被修改，默认值是 false
            //  configurable:true //控制属性是否可以被删除，默认值是 false

            //当有人读取 person 的 age 属性时，get 函数(getter)就会被调用，且返回值就是 age 的值
            get(){
                console.log('正在读取 age 属性');
                return number;
            },

            //当有人修改 person 的 age 属性时，set 函数（setter）就会被调用，且会收到修改的具体值 
            set(value){
                console.log('正在修改 age 属性，值是', value);
                this.number = value;
            }
         })
        console.log(Object.keys(person));

        for (let key in person) {
            console.log('@', person[key]);
        }

        console.log(person);
    </script>
</body>
</html>