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

来自姬鸿昌的知识库
跳到导航 跳到搜索
第273行： 第273行：
 
</html>
 
</html>
 
</syntaxhighlight>在 console 里通过 delete person.age 删除对象的属性，然后再在 console 中通过 person 输出，发现对象的 age 属性还在，没有被删除
 
</syntaxhighlight>在 console 里通过 delete person.age 删除对象的属性，然后再在 console 中通过 person 输出，发现对象的 age 属性还在，没有被删除
 +
 +
=== 测试删除 Object.defineProperty 和 configurable:true 添加的对象属性 ===
 +
<syntaxhighlight lang="html">
 +
<!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
 +
        })
 +
        console.log(Object.keys(person));
 +
 +
        for (let key in person) {
 +
            console.log('@', person[key]);
 +
        }
 +
 +
        console.log(person);
 +
    </script>
 +
</body>
 +
</html>
 +
</syntaxhighlight>

2024年7月28日 (日) 10:19的版本

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
         })
        console.log(Object.keys(person));

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

        console.log(person);
    </script>
</body>
</html>
取自“https://www.jihongchang.top/index.php?title=Vue_Object.defineProperty&oldid=8018”