Reflect

Wed, 02 Oct 2024 00:00:00 +0800

一、Reflect有什么用？

一句话，Reflect没什么用，除了装装逼，让人看起来高大上以外，并不具有什么牛逼之处。

准确讲应该是这样的，Reflect更像是一种语法变体，其挂在的所有方法都能找到对应的原始语法，也就是Reflect的替代性非常强。

其实从Reflect这个单词本身字面意思就能体会出Reflect的神韵，Reflect的中文意思是“反射”，阳光照在镜子上反射，其实光子还是那些光子，只是变化了方向。

举例说明：

Reflect对象挂载了很多静态方法，所谓静态方法，就是和Math.round()这样，不需要new就可以直接使用的方法。

比较常用的两个方法就是get()和set()方法：

Reflect.get(target, propertyKey\[, receiver\])
Reflect.set(target, propertyKey, value\[, receiver\])

就作用而言，等同于：

target[propertyKey]
target[propertyKey] = value;

比方说页面上有个输入框，其DOM对象变量是input，平时我们对整个输入框赋值使用的语句多半是：

input.value = 'zhangxinxu';

就可以直接使用Reflect.set()方法代替：

Reflect.set(input, 'value', 'zhangxinxu')

效果是一模一样的。

又例如，我们希望对input的value属性重新定义，使该输入框value属性发生变化的时候可以同时触发'change'事件，下面是使用大家普遍比较熟悉的Object.defineProperty()方法实现的示意：

const props = Object.getOwnPropertyDescriptor(input, 'value');
Object.defineProperty(input, 'value', {
 ...props,
 set (v) {
 let oldv = this.value;
 props.set.call(this, v);
 // 手动触发change事件
 if (oldv !== v) {
 this.dispatchEvent(new CustomEvent('change'));
 }
 }
});

上述代码我们完全可以使用Reflect对象实现，具体的JavaScript代码如下所示。

const props = Reflect.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Reflect.defineProperty(input, 'value', {
 ...props,
 set (v) {
 let oldv = this.value;
 props.set.call(this, v);
 // 手动触发change事件
 if (oldv !== v) {
 this.dispatchEvent(new CustomEvent('change'));
 }
 }
});

我们可以测试下，假设页面HTML如下：

<input id="input">

测试代码为：

input.addEventListener('change', () => {
 document.body.append('变化啦~');
});

input.value = 'zhangxinxu';

此时，就可以看到页面上出现了“变化啦~”文字

Reflect on Last Stand

Reflect

一、Reflect有什么用？