Object.defineProperty 和 Proxy 区别

bject.defineproperty 用于 监听 对象的数据变化  
 
用法 Object.defineproperty(obj, key, descriptor)
 
例如: 
 
let obj = {
    age: 11
}
 
let val = 1
 
Object.defineproperty(obj, 'name', {
    get() {
        return val
    },
    set(newVal) {
        val = newVal
    }
})
 
obj.name
 
obj.name = 11
 
此外 还有以下配置项 : 
1. configurable
2. enumerable
3. value
 
缺点: 
1.无法监听数组变化
2.只能劫持对象的属性,属性值也是对象那么需要深度遍历
 
----------------------------------------------
 
proxy  可以理解为 在被劫持的对象之前 加了一层拦截 
 
例如: 
 
let proxy = new Proxy({}, {
    get(obj, prop) {
        return obj[prop]
    },
    set(obj, prop, val) {
        obj[prop] = val
    }
})
 
proxy返回的是一个新对象, 可以通过操作返回的新的对象打到目的 
proxy有多达13种拦截方法,
get() , set() , apply() , has() , contruct() ps: 用于拦截new操作, 
deleteProperty() , defineproperty() , enumerate() , getOwnPropertyDescriptor() ,
getPrototypeOf() , isExtensible() , ownKeys() , preventExtensions() , setPrototypeOf() , 
 
 
当使用 defineProperty 时,我们修改原来的 obj 对象就可以触发拦截

————————————————
版权声明:本文为CSDN博主「皇甫长宇@深圳」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/hiqq1006727453/article/details/88560804

发布了229 篇原创文章 · 获赞 80 · 访问量 42万+

猜你喜欢

转载自blog.csdn.net/qq_34629352/article/details/104965061
今日推荐