Proxy&Reflect

大部分时候我们使用的都是前置代理, 即我们把直接和代理对象进行交互(所有操作都发生在代理对象身上)的方式叫做前置代理. 那什么是后置代理?

借助原型链机制, 我们直接和 obj 进行交互而不是和代理对象进行交互, 只有当 obj 不存在对应方法时才会通过原型链去查找代理对象.

var pobj = new Proxy({}, {
    get(target, key) {
        if (!target[key]) {   //若target[key]不存在；则这里不应该写在target上，应该写在Obj上，这样下次就不用再次进入原型链的代理里面了
            target[key] = function () {
                console.log(key);
            };
        }
        return target[key];
    }
});

var obj = Object.create(pobj);
obj.sayHello();
obj.sayGoodBye();

可以看出来的是, 对于原本存在于目标对象(target)上的属性, 使用代理前置开销更大, 因为明明已经具有对应属性了却还要经过一次代理对象, 而使用代理后置开销更小. 对于那些不存在的属性, 使用后置代理开销更大, 因为不仅要经过原型链查找还要经过一次代理对象, 而使用前置代理只需要经过一次代理对象. 当然也可能引擎有特殊的优化技巧使得这种性能差异并不明显, 所以也看个人喜欢采用哪种方式吧.

Reflect 的方法和 Proxy 的方法是成对出现的, 和以前的一些方法相比, Reflect 的方法对参数的处理不同或返回值不同, 尽管很细微的差别, 但是当和 Proxy 配合使用的时候, 使用以前的方法可能导致 Proxy 对象和普通对象的一些行为不一致, 而使用 Reflect 则不会有这样的问题, 所以建议在 Proxy 中都使用 Reflect 的对应方法.

另一方面是 Reflect 暴露的 API 相对更加底层, 性能会好一些.

最后是有些事情只能通过 Reflect 实现, 具体参考这个例子. 但是个人感觉这个例子并不是很好, 毕竟这个场景太少见了.

var pobj = new Proxy({}, {
    get(target, key) {
        if (!target[key]) {
            target[key] = function () {
                console.log(key);
            };
        }
        return target[key];
    }
});

var obj = Object.create(pobj);
obj.sayHello();
obj.sayGoodBye();

//在这个例子中, 调用 obj 上一开始不存在的方法最终都会通过原型链找到代理对象, 进而找到 target 也即空对象, 然后对空对象实例化对应的方法. 
//这里的原型链查找总是让人感觉不太爽, 明明进入到 get trap 就肯定说明 obj 一开始不存在对应方法, 那我们理应可以在这时候给 obj 设置对应方法, 
//这样下次调用的时候就不会进行原型链的查找了, 为什么非要给那个毫无卵用的空对象设置方法, 导致每次对 obj 进行方法调用还是要进行原型链查找?

改成receiver[key]

var pobj = new Proxy({}, {
    get(target, key, receiver) {
        if (!receiver[key]) {
            receiver[key] = function () {
                console.log(key);
            };
        }
        return receiver[key];
    }
});

var obj = Object.create(pobj);
obj.sayHello();
// RangeError: Maximum call stack size exceeded  栈溢出
//因为obj.sayHello obj对内没这个属性 => 通过原型链 到proxy的get 里面找  receiver[key] ==obj['sayHello'] =>又循环 一直调用导致stack内存溢出

若用receiver.hasOwnProperty(key)一样会死循环；用reflect.has去判断是否有该属性，reflect更底层不会向之前那个通过obj去找实例或者原型上的方法导致循环调用

var pobj = new Proxy({}, {
    get(target, key, receiver) {
        if (!receiver.hasOwnProperty(key)) {
            receiver[key] = function () {
                console.log(key);
            };
        }
        return receiver[key];
    }
});

var obj = Object.create(pobj);
obj.sayHello();
// RangeError: Maximum call stack size exceeded
//还是堆栈溢出, 因为 hasOwnProperty() 其实是 Object.prototype.hasOwnProperty(), 意味着在原型链的尽头, 而 pobj 在原型链上更近的位置, 
//于是相当于 receiver/obj 并不存在 hasOwnProperty(), 于是变成了对 obj.hasOwnProperty() 无限查找导致堆栈溢出.

用call解决
var pobj = new Proxy({}, {
    get(target, key, receiver) {
        if (!Object.prototype.hasOwnProperty.call(receiver, key)) {
            receiver[key] = function () {
                console.log(key);
            };
        }
        return receiver[key];
    }
});

var obj = Object.create(pobj);
obj.sayHello();
obj.sayHello();
// sayHello
// sayHello

若用reflect解决更好

var pobj = new Proxy({}, {
    get(target, key, receiver) {
        if (Reflect.has(target, key)) {
            return Reflect.get(target, key);
        }
        Reflect.set(receiver, key, function () {
            console.log(key);
        });
        return Reflect.get(receiver, key);
    }
});

var obj = Object.create(pobj);
obj.sayHello();
obj.sayHello();
console.log(obj.hasOwnProperty('sayHello'));

参考：https://juejin.im/post/5b7aa257e51d4538c86cf6bb#heading-2

猜你喜欢