Reflect

一、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'; 此时，就可以看到页面上出现了“变化啦~”文字 ...