[面试] Object.difineproperty和proxy有什么区别

Object.defineproperty

用于 监听 对象的数据变化

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

Proxy是ES6推出的一个类，给对象架设一层拦截器，但凡要访问或者修改这个对象上的值或者属性，都必须先经过这层拦截器, 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() ,

区别

1.Object.defineProperty 拦截的是对象的属性，会改变原对象。proxy 是拦截整个对象，通过 new 生成一个新对象，不会改变原对象。

2.proxy 的拦截方式，选择的方式很多，可以监听一些 Object.defineProperty 监听不到的操作，比如监听数组，监听对象属性的新增，删除等。