和 ES5 技术对比

除了 ES6 代理,还可以用 ES5 的属性存取器(getter/setter)来实现类似的数据绑定技术。许多流行框架使用这类技术,比如 MobXVue。使用代理而不是存取器主要有两个优点和一个主要的缺点。

Expando 属性

Expando 属性指的是在 JavaScript 中动态添加的属性。ES5 中不支持 expando 属性,每个属性的访问器都必须预先定义才能实现拦截操作。这是为什么现在预定义的键值集合成为趋势的技术原因。

另一方面,代理技术支持 expando 属性,因为每个对象定义代理,并且他们为每个对象的属性拦截操作。

expando 属性是非常重要,一个经典的例子就是使用数组。如果不能从数组中添加或者删除数组元素 JavaScript 中的数组就会很鸡肋。ES5 数据绑定技术经常通过提供自定义或者重写 Array 方法来解决这个问题。

Getters and setters

使用 ES5 方法的库使用一些特殊的语法来提供 computed 绑定属性。这些属性拥有相应的原生实现,即 getters and setters。然而 ES5 方法内部使用 getters/setters 来创建数据绑定逻辑,所以不能够和属性存取器一起工作。

代理拦截各种属性访问和改变包括 getters 和 setters,所以它不会给 ES6 方法带来问题。

缺点

使用代理最大的缺点即为浏览器支持。只有最新的浏览器才会支持,并且Proxy API 的最好的部分却无法通过 polyfill 实现。