问题
前一段时间在字节跳动时聊到了Proxy。起因是问道Vue中数据绑定的实现,回答通过设置setter和getter实现,问这样有什么缺点,答在对对象的属性的监控方面存在瑕疵,例如通过直接设置数组下标进行赋值,或者对对象直接进行修改,是无法观察到的,必须使用Vue.set添加,或者使用Array.prototype.push等方法。
面试官介绍说在Vue3中已经通过Proxy解决了这个问题。Proxy是ES6中添加的内置对象,和Reflect配合功能十分强大。正好今天看到一个。理解
根据MDN的文档,Proxy是对原对象的包装。可以包装的内容包括一系列get、set等,值得注意的是getPrototypeOf同样是一种可以拦截的操作。同时,对于未定义的操作保持原结果。
在instanceof的页面,可以看到如下示例function C() {}function D() {}var o = new C();// true, because: Object.getPrototypeOf(o) === C.prototypeo instanceof C;
那么,在上面那个问题中,既然未定义proxy的getPrototypeOf,那它就该与原对象保持一致。使用以下代码进行验证:
Object.getPrototypeOf(proxy) === Array.prototype //true
进一步思考
那么,是不是对于一切行为,在不做任何拦截的情况下,就能保证与目标对象的行为完全一致呢?很显然,这是不可能的。例如
a = {}b = new Proxy(a, {})console.log(a === b) //false
以及this的指向问题(案例来自)
const target = { m: function () { console.log(this === proxy); }};const handler = {};const proxy = new Proxy(target, handler);target.m() // falseproxy.m() // true
虽然大部分情况下这应该不会成为大的障碍,但遇到错误的时候可以从这里入手寻找问题。