1

Object.defineProperty问题

Object.defineProperty() 无法监控到数组下标的变化。vue只能通过以下几种方法来监听

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

以上几种方法也是经过vue内部处理后才能监听的。

只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历,如果属性值也是对象那么需要深度遍历,显然能劫持一个完整的对象是更好的选择。

Proxy

代理:对外暴露代理对象,操作的时候,表面上操作的是代理对象(proxy),实际上改变的是目标对象 (target),从而可以在操作代理对象的时候进行一些处理(handler)后,再传递到目标对象。

特点:

  • 可以劫持整个对象,并返回一个新对象
  • 有13种劫持操作
  • Proxy是es6提供的,兼容性不好,无法用polyfill磨平

Proxy使用:

es6提供proxy构造函数,第一个参数target:是所要代理的目标对象,可以是空对象。第二个handler是拦截器,一个拦截器可以有多个拦截操作
var proxy = new Proxy(target, handler);

所有的对target的操作都落在proxy上了。

拦截操作一共有13个

  • get
get(target, propKey, receiver):拦截对象属性的读取 可以继承
  • set
set(target, propKey, value, receiver):拦截对象属性的设置,比如proxy.foo = v或proxy['foo'] = v,返回一个布尔值。

更多拦截器信息>>

Reflect

反射:通过类的类类型来操作类的属性。包含来对象语言内部的方法,一共有13种,和proxy一一对应,如果在Proxy中调用Reflect的话,其实对应的就是默认行为。

Proxy的this指向

虽然 Proxy 可以代理针对目标对象的访问, 但它不是目标对象的透明代理,即不做任何拦截的情况下,也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下,目标对象内部的this关键字会指向 Proxy 代理。


oylp
365 声望17 粉丝

只是一个普普通通喜欢吃脂肪还长肉的人