博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6--Reflect
阅读量:2441 次
发布时间:2019-05-10

本文共 4777 字,大约阅读时间需要 15 分钟。

Reflect

ES6 中将 Object 的一些明显属于语言内部的方法移植到了 Reflect 对象上(当前某些方法会同时存在于 Object 和 Reflect 对象上),未来的新方法会只部署在 Reflect 对象上。

Reflect 对象对某些方法的返回结果进行了修改,使其更合理。

Reflect 对象使用函数的方式实现了 Object 的命令式操作。

静态方法

Reflect.get(target, name, receiver)

查找并返回 target 对象的 name 属性。

let exam = {
name: "Tom", age: 24, get info(){
return this.name + this.age; }}Reflect.get(exam, 'name'); // "Tom" // 当 target 对象中存在 name 属性的 getter 方法, getter 方法的 this 会绑定 // receiverlet receiver = {
name: "Jerry", age: 20}Reflect.get(exam, 'info', receiver); // Jerry20 // 当 name 为不存在于 target 对象的属性时,返回 undefinedReflect.get(exam, 'birth'); // undefined // 当 target 不是对象时,会报错Reflect.get(1, 'name'); // TypeError

Reflect.set(target, name, value, receiver)

将 target 的 name 属性设置为 value。返回值为 boolean ,true 表示修改成功,false 表示失败。当 target 为不存在的对象时,会报错。

let exam = {
name: "Tom", age: 24, set info(value){
return this.age = value; }}exam.age; // 24Reflect.set(exam, 'age', 25); // trueexam.age; // 25 // value 为空时会将 name 属性清除Reflect.set(exam, 'age', ); // trueexam.age; // undefined // 当 target 对象中存在 name 属性 setter 方法时,setter 方法中的 this 会绑定 // receiver , 所以修改的实际上是 receiver 的属性,let receiver = {
age: 18}Reflect.set(exam, 'info', 1, receiver); // truereceiver.age; // 1 let receiver1 = {
name: 'oppps'}Reflect.set(exam, 'info', 1, receiver1);receiver1.age; // 1

Reflect.has(obj, name)

是 name in obj 指令的函数化,用于查找 name 属性在 obj 对象中是否存在。返回值为 boolean。如果 obj 不是对象则会报错 TypeError。

let exam = {
name: "Tom", age: 24}Reflect.has(exam, 'name'); // true

Reflect.deleteProperty(obj, property)

是 delete obj[property] 的函数化,用于删除 obj 对象的 property 属性,返回值为 boolean。如果 obj 不是对象则会报错 TypeError。

let exam = {
name: "Tom", age: 24}Reflect.deleteProperty(exam , 'name'); // trueexam // {age: 24} // property 不存在时,也会返回 trueReflect.deleteProperty(exam , 'name'); // true

Reflect.construct(obj, args)

等同于 new target(…args)。

function exam(name){
this.name = name;}Reflect.construct(exam, ['Tom']); // exam {name: "Tom"}

Reflect.getPrototypeOf(obj)

用于读取 obj 的 proto 属性。在 obj 不是对象时不会像 Object 一样把 obj 转为对象,而是会报错。

class Exam{
}let obj = new Exam()Reflect.getPrototypeOf(obj) === Exam.prototype // true

Reflect.setPrototypeOf(obj, newProto)

用于设置目标对象的 prototype。

let obj ={
}Reflect.setPrototypeOf(obj, Array.prototype); // true

Reflect.apply(func, thisArg, args)

等同于 Function.prototype.apply.call(func, thisArg, args) 。func 表示目标函数;thisArg 表示目标函数绑定的 this 对象;args 表示目标函数调用时传入的参数列表,可以是数组或类似数组的对象。若目标函数无法调用,会抛出 TypeError 。

Reflect.apply(Math.max, Math, [1, 3, 5, 3, 1]); // 5

Reflect.defineProperty(target, propertyKey, attributes)

用于为目标对象定义属性。如果 target 不是对象,会抛出错误。

let myDate= {
}Reflect.defineProperty(MyDate, 'now', {
value: () => Date.now()}); // true const student = {
};Reflect.defineProperty(student, "name", {
value: "Mike"}); // truestudent.name; // "Mike"

Reflect.getOwnPropertyDescriptor(target, propertyKey)

用于得到 target 对象的 propertyKey 属性的描述对象。在 target 不是对象时,会抛出错误表示参数非法,不会将非对象转换为对象。

var exam = {
}Reflect.defineProperty(exam, 'name', {
value: true, enumerable: false,})Reflect.getOwnPropertyDescriptor(exam, 'name')// { configurable: false, enumerable: false, value: true, writable:// false} // propertyKey 属性在 target 对象中不存在时,返回 undefinedReflect.getOwnPropertyDescriptor(exam, 'age') // undefined

Reflect.isExtensible(target)

用于判断 target 对象是否可扩展。返回值为 boolean 。如果 target 参数不是对象,会抛出错误。

let exam = {
}Reflect.isExtensible(exam) // true

Reflect.preventExtensions(target)

用于让 target 对象变为不可扩展。如果 target 参数不是对象,会抛出错误。

let exam = {
}Reflect.preventExtensions(exam) // true

Reflect.ownKeys(target)

用于返回 target 对象的所有属性,等同于 Object.getOwnPropertyNames 与Object.getOwnPropertySymbols 之和。

var exam = {
name: 1, [Symbol.for('age')]: 4}Reflect.ownKeys(exam) // ["name", Symbol(age)]

Proxy与Reflect组合使用

Reflect 对象的方法与 Proxy 对象的方法是一一对应的。所以 Proxy 对象的方法可以通过调用 Reflect 对象的方法获取默认行为,然后进行额外操作。

let exam = {
name: "Tom", age: 24}let handler = {
get: function(target, key){
console.log("getting "+key); return Reflect.get(target,key); }, set: function(target, key, value){
console.log("setting "+key+" to "+value) Reflect.set(target, key, value); }}let proxy = new Proxy(exam, handler)proxy.name = "Jerry"proxy.name// setting name to Jerry// getting name// "Jerry"

使用场景拓展

实现观察者模式

// 定义 Set 集合const queuedObservers = new Set();// 把观察者函数都放入 Set 集合中const observe = fn => queuedObservers.add(fn);// observable 返回原始对象的代理,拦截赋值操作const observable = obj => new Proxy(obj, {
set});function set(target, key, value, receiver) {
// 获取对象的赋值操作 const result = Reflect.set(target, key, value, receiver); // 执行所有观察者 queuedObservers.forEach(observer => observer()); // 执行赋值操作 return result;}

转载地址:http://wasqb.baihongyu.com/

你可能感兴趣的文章
setimmediate_了解setImmediate()
查看>>
git可视化工具使用_使用Go可视化您本地的Git贡献
查看>>
JavaScript中的call()和apply()
查看>>
node 发出ajax请求_使用Node发出HTTP请求
查看>>
成为独立开发者
查看>>
http与https_HTTP与HTTPS
查看>>
node.js运行js_Node.js运行时v8选项列表
查看>>
git教程_出色的Git教程的不完整列表
查看>>
Express,请求参数
查看>>
express发送文件_使用Express发送文件
查看>>
Object toString()方法
查看>>
调试JavaScript的权威指南
查看>>
我如何运行一些JavaScript代码段
查看>>
地理位置api_如何使用地理位置API
查看>>
数据结构设计 数据字典_Go数据结构:字典
查看>>
node_modules文件夹的大小不是问题。 这是一种特权
查看>>
dom 删除所有子元素_如何从DOM元素中删除所有子级
查看>>
html 打印样式控制_如何使用样式打印HTML
查看>>
gatsby_Next.js vs Gatsby vs create-react-app
查看>>
掌握React.Memo
查看>>