【图解系列】Object.defineProperty vs Proxy

最近看了《完全图解超实用思考书》一书,

觉得使用图解来记忆非常有用，

所以，接下来准备写一个【图解系列】

将很多的文字内容使用图解的形式表示出来。

主题：【Object.defineProperty vs Proxy】

图解：

文字说明：

Proxy

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

Proxy的优势如下:

• Proxy可以直接监听对象而非属性；
• Proxy可以直接监听数组的变化；
• Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的；
• Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改；
• Proxy作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

Object.defineProperty

Object.defineProperty的优势如下:

• 兼容性好（支持IE9）

Vue响应式实现，使用 Object.defineProperty 的缺点：

Object.defineProperty (obj, prop, descriptor) 的问题主要有三个：

• 无法监听数组的变化

Vue 把会修改原来数组的方法定义为变异方法。

变异方法例如 push、pop、shift、unshift、splice、sort、reverse等，是无法触发 set 的。

非变异方法，例如 filter，concat，slice 等，它们都不会修改原始数组，而会返回一个新的数组。

Vue 的做法是把这些变异方法重写来实现监听数组变化。

• 必须遍历对象的每个属性

使用 Object.defineProperty 多数情况下要配合 Object.keys 和遍历，于是就多了一层嵌套。

并且由于遍历的原因，假如对象上的某个属性并不需要“劫持”，但此时依然会对其添加“劫持”。

• 必须深层遍历嵌套的对象

当一个对象为深层嵌套的时候，必须进行逐层遍历，直到把每个对象的每个属性都调用 Object.defineProperty() 为止。