数据代理: 通过一个对象代理对另一个对象中属性的操作（读/写）

数据代理

Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Object.defineProperty(obj, prop, desc)

obj 需要定义属性的当前对象
prop 当前需要定义的属性名
desc 属性描述符

属性描述符

数据描述符

configurable:是否可以重新定义
enumerable：是否可以枚举
value：初始值
writable：是否可以修改属性值

访问描述符

get：是一个回调函数，根据其他相关的属性动态计算得到当前属性值
set：也是一个回调函数，监视当前属性值的变化，更新其他相关的属性值

<script type="text/javascript" >

    let number = 18

    let person = {

        name:'张三',

        sex:'男',

    }

    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)

            number = value

        }

    })

			// console.log(Object.keys(person))

</script>

VUE中的数据代理

Vue中的数据代理：通过实例对象vm来代理data对象中属性的操作（读/写）

基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

//通过一个对象代理对另一个对象中属性的操作（读/写）-->

let obj = {x:100}

let obj2 = {y:200}

Object.defineProperty(obj2,'x',{

    get(){

        return obj.x

    },

    set(value){

        obj.x = value

    }

})

巴特西

数据代理Object.defineProperty()

数据代理

Object.defineProperty()

属性描述符

VUE中的数据代理

最新文章

热门文章