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); // test
obj.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中用了 ,看过源码的同学肯定都见过, 赶紧用起来吧。