这个玩意 和 那个 Proxy 对象一样, 是es6为了操作对象而提供的Api, 个人理解吧,应该是为了防止你直接操作对象(object, 函数),做出的一个代替方案;

比如之前使用的 Obejct.defineProperty(),Object.getOwnProperty(), Object.setPrototype();  等等 这些 语言层面的 api 的替代品吧

特别是那个defineProperty 不是用在vue中的双向数据绑定使用的吗,用过vue的童鞋肯定知道了,我已经很久没用过了,也不会vue了,渐渐淡忘

1. 先上个小例子吧

下面的代码会输出 一个 true  就是 name属性 在obj这个对象中

var obj = {name: 'zyc', job: '前端开发'};
console.log('name' in obj);

换成 Reflect 的写法就是

Reflect.has(target, key); // 第一个是目标对象 第二个是参数   是不是更直观明了

var obj = {name: 'zyc', job: '前端开发'};
console.log(Reflect.has(obj, 'name'));

2. 其实吧  Reflect 也是很方便  

之前 我们 要是使用 Object 更改对象的 一些属性之后  可能需要通过 try catch 来进行捕获错误  改成 Reflect 之后 如果 更改失败会给我们返回一个 false 这样其实更加方便了

3. Reflect的api 静态方法  对常用的方法 进行解释哈

3.1  Reflect.get(target, property, receiver);   // 很简单其实就是获取对象的某个属性值     第三个参数 表示一个接受着  一般配合proxy代理对象使用   等同于  obj.name;

如果目标对象 配置个 getter 函数 那么 this 将指向那个 receiver 所以下面输出了 小明王倩

var obj = {name: 'zyc', job: '前端开发', get foo() { return this.name + this.job;}};
console.log(Reflect.get(obj, 'foo', { name: '小明', job: '王倩' })); // 输出 小明王倩

注意: 如果第一个参数 不是对象的话 会报错 

3.2  Reflect.set(target, property, value,  receiver);   // 设置某个属性值    等同于   如  obj.name = "xxx"

3.3  Reflect.has(target, property); // 判断属性是否在目标对象上   等同于  key in target 

3.4 Reflect.deleteProperty(target, property); // 删除对象上的某个属性  等同于   delete obj[property]

3.5 Reflect.construct(target, args);  // 使用构造函数  等同于  new  Target(...args);   类似apply的那个用法 

function Person(name, age) {
    this.name = name;
    this.age = age;
}
var a = new Person('小明', 22);
var b = Reflect.construct(Person, ['小明', 22]);
console.log(b);

3.6 Reflect.getPrototypeOf(obj);     // 用于读取这个对象的 __proto__  等同于 Object.getPrototypeOf()

3.7 Reflect.setPrototypeOf(obj);     // 用于设置这个对象的 __proto__  等同于 Object.setPrototypeOf()

3.8 Reflect.apply(func, this, args); // 调用某个函数 并制定this作用域   等同于  Function.prototype.apply()

举个例子 比如查找数组中的 最小或最大值

以前的用法可能是  

Math.max.apppy(Math, ...args);   换成 Reflect的话 就是

var arr = [2, 5, 6, 9, 11];

console.log(Reflect.apply(Math.max, Math, arr));   // 输出 11

3.9 Reflect.defineProperty(target, property, value);   // 给某个对象 添加新的属性值 或者覆盖之前的属性值

3.10 Reflect.ownKeys();  // 获取对象的键值  返回一个数组     等同于 Object.keys();

有些不常用的我就没有说出来了    就是简单了解了解哈  

关注我 持续更新前端知识    努力成为大佬

Logo

前往低代码交流专区

更多推荐