js中的Reflect入门讲解
这个玩意 和 那个 Proxy 对象一样, 是es6为了操作对象而提供的Api, 个人理解吧,应该是为了防止你直接操作对象(object, 函数),做出的一个代替方案;比如之前使用的 Obejct.defineProperty(),Object.getOwnProperty(), Object.setPrototype(); 等等 这些 语言层面的 api 的替代品吧特别是那个defineProp
这个玩意 和 那个 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();
有些不常用的我就没有说出来了 就是简单了解了解哈
关注我 持续更新前端知识 努力成为大佬
更多推荐
所有评论(0)