defineProperty与Proxy对比

定义

• Object.defineProperty对象定义/修改属性的方法。
• Proxy可为对象设置代理

用法

• defineProperty
  通常我们定义一个对象会使用 var a = { key：value } ，使用defineProperty则如下 写法一：

// 数据描述符
Object.defineProperty(a, ‘key’，{
  value：‘value’，
  writable: true, // 变量是可获取、修改
  configurable: true, // a属性描述是否是可修改，即：可通过Object.defineProperty(o, 'a',enumerable: false})方式修改其描述值
  enumerable: true // 是否是可枚举的，即：Object.keys()是否会返回该属性
})

// 访问器描述符
Object.defineProperty(obj, 'child', {
    configurable: true,
    enumerable: true,
    set(value) {
        console.log(value)
    },
    get() {
        console.log(this.value)
    }
})

• Proxy

const p = new Proxy(target, handler)

handler 对象是一个容纳一批特定属性的占位符对象。它包含有 Proxy 的各个捕获器（trap）。

get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']。

set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。

has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。

deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。

ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。

getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。

defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。

preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。

getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。

isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。

setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。

apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。

construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。

区别

• defineProperty能监听get与set，Proxy可监听13种。
• Proxy如果目标不做任何拦截，则代理与目标对象行为一致。
• defineProperty监听对象变化遍历对象的属性，数组无法监听。Proxy可以直接监听对象而非属性变化，可以监听数组变化且支持13个拦截。
• Proxy直接可以劫持整个对象,并返回一个新对象,不管是操作便利程度还是底层功能上都远强于Object.defineProperty。