Reflect

文章目录

前言

Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与 proxy的方法相同。Reflect 不是一个函数对象，因此它是不可构造的。不能用new对象。

为什么用

Reflect 的所有属性和方法都是静态的（就像 Math 对象）你可以直接用。

Reflect 是 ECMAScript 6 中新增的一个全局对象，提供了一组静态方法，用于支持 JavaScript 的元编程功能。

它主要有以下几个特点：

它拥有与 Object 对象相同的 API，并且反射方法的名称和参数也与对应的 Object 方法相同。所以你可以很容易的上手使用。

使用了Reflect.get 和 Reflect.set 方法来代替原生的对象访问方法。例如：

Reflect.get(target, targetKey)//获取对象身上某个属性的值，类似于 target[name]。

Reflect.set(target, targetKey, value)//设置对象属性，类似于target[name]=value或target.name=value

使用起来很简单。

除了这两个常用的属性方法还有一些定义对象下面是一个使用Reflect.defineProperty()方法来定义一个对象的属性的例子：

const obj = {};Reflect.defineProperty(obj, 'name', {value: 'test',writable: false});console.log(obj.name); // testobj.name = 'test1'; // TypeError: Cannot assign to read only property 'name' of object '

因为设置了对象属性只读不能写所以不可以修改会报错。

Reflect.apply() apply也是我们在js中调用

例如：

我想直接追加原数组元素可以这么干

const array = ['a', 'b'];const elements = [0, 1, 2];array.push.apply(array, elements);console.info(array); // ["a", "b", 0, 1, 2]

当然也可以用Reflect.apply

function add(a, b) {return a + b;}const args = [2, 3];console.log(Reflect.apply(add, null, args)); // 5

很好理解就是求和。

还有更多好玩的例子可以参考官方文档MDN

链接: MDN.

总结

尤大都在vue3中用了 ，看过源码的同学肯定都见过， 赶紧用起来吧。