欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6之Object.defineProperty 和 Proxy 区别

程序员文章站 2022-07-16 18:01:37
...
1、Object.defineproperty

用于监听对象的数据变化
语法: Object.defineproperty(obj, key, descriptor)

let obj = {
    age: 11
}
let value = 'xiaoxiao';
//defineproperty有gettter和setter
Object.defineproperty(obj, 'name', {
    get() {
        return value
    },
    set(newValue) {
        value = newValue
    }
})
obj.name = 'pengpeng';

此外 还有以下配置项 :

  • configurable
  • enumerable
  • value

缺点:
1.无法监听数组变化
2.只能劫持对象的属性,属性值也是对象那么需要深度遍历

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 对象就可以触发拦截
而使用 proxy,就必须修改代理对象,即 Proxy 的实例才可以触发拦截