Object.defineProperty 方法的重要性

Vue底层很多地方都会用到 Object.defineProperty方法,例如:

  • 数据劫持
  • 数据代理
  • 计算属性

defineProperty 直译: 给 方法 定义 属性。

源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>回顾Object.defineproperty方法</title>
    </head>
    <body>
        <script type="text/javascript" >
            let number = 18

            let person = {
                name:'张三',
                sex:'男',

                //错误写法举例: 这种写法只会在一开始会把number的值18给age, 如果以后number值变的话并不会同步给age.
                //age:number
            }

            //为 person 对象定义一个属性 age :    //这种方法虽然麻烦,但是比较高级:从控制台可以到后添加的 age属性的颜色淡一些(表示不可以枚举)。
            //
            Object.defineProperty(person,'age',{
                // value:18,
                //控制属性:
                // enumerable:true,     //控制属性是否可以枚举,默认值是false
                // writable:true,         //控制属性是否可以被修改,默认值是false
                // configurable:true     //控制属性是否可以被删除,默认值是false

                //★★★
                //当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
                //get:function 函数名(){} 的缩写形式: //去掉 : ,然后去掉 function, 去掉 函数名
                get(){
                    console.log('有人读取age属性了')

                    //返回上面变量number的值:
                    return number
                },

                //★★★
                //当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
                set(value){
                    console.log('有人修改了age属性,且值是',value)

                    //修改上面变量number的值:
                    number = value
                }

            })

            // console.log(Object.keys(person))    // Object.keys() 功能:可以把传入的参数对象中的所有属性名提取出来变为一个数组。

            //功能: 遍历 person 对象中每个属性的属性值.
            //此处可以验证:日志中无法看到 通过 Object.defineProperty(person,'age',{ value:18}) 添加的属性值18 。 原因:Object.defineProperty() 追加的属性无法被枚举(即 不能被遍历)。
            for(let key in person)
            {
                console.log('@', person[key])
            }


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