背景:
Reflect
为了操作对象而提供的新Api
和Proxy
对象一样
特点
- 将
object
对象的一些明显属于语言内部的方法,放到Reflect
上处理; - 修改某些
object
返回的异常结果,让其变得更合理; - 让
object
操作都变成函数行为; reflect
对象上的方法与proxy
对象的方法一一对应,只要是proxy
上的方法,就能在Reflect
对象上找到对应的方法;
console.log('assign' in Object) // object使用命令式行为去操作
console.log(Reflect.has(Object,'assign')) // Object使用函数的行为去操作
方法
-
Reflect.get(target,name,receiver)
方法 获取target
对象上的name的value值 -
Reflect.set(target,name,value,receiver)
方法 设置target
对象上的name的value值,并且this修改receiver重新绑定 -
Reflect.has(obj,name)
方法 对象上面是否存在某个属性 -
Reflect.deleteProperty(obj,name)
方法 删除对象上某个属性
上述方法中第一个参数不是对象的话,会报错
1:使用Reflect.get()
方法
语法:Reflect.get(target,name,receiver)
接收三个字段
-
target:目标对象
-
name:属性名
-
receiver: this绑定的对象 接收对象
let myObject = {
foo: 1,
bar: 2,
get baz () {
• return this.foo + this.bar
}
}
console.log(Reflect.get(myObject,'foo')) // 1
console.log(Reflect.get(myObject,'bar')) // 2
console.log(Reflect.get(myObject,'baz')) // 3
1.1 使用receiver来指定数据
let myObject1 = {
foot: 1,
bar: 2,
get boo () {
• return this.foot + this.bar
}
}
let myReceiver = {
foot: 2,
bar: 4,
}
name 在有get的情况下,则读取函数的this绑定receiver (this指向发生了改变)
console.log('访问',myObject1.boo) // 3
console.log('访问2',Reflect.get(myObject1,'boo',myReceiver)) // 6
tips:
Reflect.get()
的第一个参数必须是一个对象,否则会报错
2:使用Reflect.set()
方法
通过Reflect.set
方法设置target的name属性等于value
语法:Reflect.set(target,name,value,receiver)
接收四个字段
-
target:目标对象
-
name:属性名
-
value:值
receiver: this
绑定的对象 接收对象
let myObject2 = {
foot: 1,
set bar (value) {
• return this.foot = value
}
}console.log('读取原有属性的值:',myObject2.foot) // 1
Reflect.set(myObject2,'foot', 2)
console.log('Reflect.set修改原有属性的值:',myObject2.foot)// 2
Reflect.set(myObject2,'bar', 6)
console.log('通过Reflect.set修改原有属性的值:',myObject2.foot) // 6
如果name
属性设置了赋值函数,则赋值函数的this
绑定receiver
let myObject3 = {
foo: 3,
set bar (value) {
• return this.foo = value
}
}
let receiverMyObject = {
foo: 0,
}
通过Reflect.set()
修改foo
的值
Reflect.set(myObject3,'bar',2,receiverMyObject)
console.log('target原有的值',myObject3.foo) // 3
console.log('this指向的receiver发生了变化:',receiverMyObject.foo) // 2
3:使用Reflect.has()
方法
通过 Reflect.has()
方法查看属性是否存在,返回boolean值
let obj1 = { a: 1 }
旧方法
console.log('a' in obj1) // true
使用 Reflect.has()
方法
语法:Reflect.has(obj,name)
console.log(Reflect.has(obj1,'a')) // true
4:删除属性操作
语法:Reflect.deleteProperty(obj,name)
let obj2 = { title: '标题信息', name: '名称信息' }console.log('对象原有内容:', obj2) // {title: '标题信息', name: '名称信息'}
旧方法
delete obj2.title
console.log('使用旧方法删除的值:', obj2) // {name: '名称信息'}
使用Reflect.deleteProperty()
进行删除
Reflect.deleteProperty(obj2,'name')
console.log('使用Reflect.deleteProperty()方法删除后的:', obj2) // { }
5:constructor
的使用
function Test (value) {
this.value1 = value
}
通过new实例化对象
let objFun = new Test('测试')
console.log('objFun:',objFun) // Test {value1: '测试'}
通过Reflect.construct()
调用构造函数
let objFun2 = Reflect.construct(Test,['初始化声明'])
console.log('objFun2:',objFun2) // Test {value1: '初始化声明'}
6: Reflect.getPrototypeOf()
获取对象的__proto__
属性
tips: 下面几个方法是读取函数的
__proto__
属性
之前的写法:通过Object.getPrototypeOf()
获取指定对象的原型对象
console.log(Object.getPrototypeOf(objFun))
如果Object.getPrototypeOf()
传入的不是对象,会先转换成对象,再运行
console.log(Object.getPrototypeOf(2)) // Number {0, constructor: ƒ, toExponential: ƒ, toFixed: ƒ, toPrecision: ƒ, …}
console.log('旧写法:',Object.getPrototypeOf(objFun) === Test.prototype) // 旧写法: true
Reflect只接收对象,不是对象的话会报错
console.log(Reflect.getPrototypeOf(2)) // 报错,提示Reflect.getPrototypeOf()第一个参数必须是对象
console.log('Reflect写法:',Reflect.getPrototypeOf(objFun) === Test.prototype) // Reflect写法: true
笔记,后续持续更新,敬请期待~