JavaScript:Reflect.get()和obj ['foo']之间的区别

Question

无法理解为什么我应该使用Reflect.get(obj, 'foo')而不是obj['foo'],或为什么第一个是有用的,因为我们可以使用旧的和旧的对象括号表示法做同样的事情.有人可以详细说明吗？

var obj = {foo: 'bar'};
obj['foo'];
Reflect.get(obj, 'foo');

Answer 1

return Reflect.get(...arguments);

也get为 the调用陷阱bar。

const case1 = new Proxy({
    get foo() {
        console.log("The foo getter", this);
        return this.bar;
    },
    bar: 3
}, {
    get(target, property, receiver) {
        console.log("The Proxy get trap", ...arguments);
        return Reflect.get(...arguments);
    }
});
console.log(case1.foo);

> case1.foo
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The foo getter ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?bar ?Proxy {bar: 3}
?3

return target[property];

使用未代理的对象target.

> case1.foo
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The foo getter ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?bar ?Proxy {bar: 3}
?3

> case2.foo
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The foo getter ?Proxy {bar: 3}
?3

return receiver[property];

使用代理对象，receiver导致无限循环。

const case2 = new Proxy({
    get foo() {
        console.log("The foo getter", this);
        return this.bar;
    },
    bar: 3
}, {
    get(target, property, receiver) {
        console.log("The Proxy get trap", ...arguments);
        return target[property];
    }
});
console.log(case2.foo);

> case3.foo
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
?The Proxy get trap ?{bar: 3} ?foo ?Proxy {bar: 3}
……
Uncaught RangeError: Maximum call stack size exceeded

现在你明白了。

Answer 2

好吧,对你的问题的一个迂腐的答案是它们完全不同:属性访问器返回对属性的引用,同时Reflect.get返回其值.

从实际的角度来看,没有任何区别,因为属性引用始终在右侧取消引用.

一个实际用法Reflect.get是使用其第三个参数,当与a结合使用时Proxy,可以用于创建相同数据的不同"视图".

let numbersView = obj => new Proxy(obj, {
    get(target, key, receiver) {
        return receiver(target[key])
    }
});

let decimal = x => String(x);

let english = x => {
    if (x === 1) return 'one';
    if (x === 2) return 'two';

};

let v = numbersView({
    a: 1,
    b: 2
});

console.log(Reflect.get(v, 'a', decimal))
console.log(Reflect.get(v, 'a', english))

这个例子有点构成,但你明白了.