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

来自姬鸿昌的知识库
跳到导航 跳到搜索
第1行: 第1行:
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=11
 
 
 
=== ES6 往对象上添加属性 ===
 
=== ES6 往对象上添加属性 ===
<syntaxhighlight lang="html">
+
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=11<syntaxhighlight lang="html">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html lang="en">
 
<html lang="en">

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

ES6 往对象上添加属性

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

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

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

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