Object.defineProperty
缺陷:
1. 设计的初衷不是为了监听一个对象中的所有属性,初衷是定义普通的属性
2. 无法对新增属性、删除属性进行监听
Proxy 代理对象
/*
const p = new Proxy(obj,{})
*/
const obj = {
name:'hyf',
age:18,
height:1.88
}
const p = new Proxy(obj,{
set:function(target,key,newValue){
target[key] = newValue
},
get: function(target,key){
return target[key]
},
has:function(target,key){
return key in target
},
deleteProperty: function(target,key){
delete target[key]
},
})
console.log(p.name)
p.name = 'myl'
console.log(p.name)
function Foo(){}
let fooProxy = new Proxy(Foo,{
// 监听函数apply
apply(target,thisArg,otherArgs){
return target.apply(thisArg,otherArgs)
},
// 监听函数new
construct(target,argArray,newTarget){
return new target()
}
})
fooProxy.apply()
new fooProxy()
捕获器
get(target,key,)
:属性读取操作的捕获器set(target,key,newValue,)
:属性读取操作的捕获器has(target,key,)
: in 操作符的捕获器deleteProperty(target,key,)
:delete操作符的捕获器
Reflect
操作JavaScript对象的方法,类似Object操作对象的方法。
为什么出现?
1. 早期没有考虑到对对象本身操作如何设计更加规范,全部放到Object上
2. Object是一个构造函数,放在Object上不合适
3. 类似in/delete,会让js开起来有些奇怪
4. 因此ES6新增Reflect对象,让这些操作集中到Reflect上
5. 在使用Proxy时,可以做到不操作原对象
常见方法
- Reflect.has(target,prop)
- Reflect.get(target,prop,[receiver])
- Reflect.set(target,prop,value,[receiver])
- Reflect.deleteProperty(target,prop)
const obj = {
name:'hyf',
age:18,
height:1.88
}
const p = new Proxy(obj,{
set:function(target,key,newValue,receiver){
// 1. 不再直接操作原对象
// 2. 可以获取是否操作成功
// 3. receiver就是外存Proxy对象 p===receiver
let flag = Reflect.set(target,key,newValue,receiver)
if (!flag) {
throw new Error('修改失败')
}
},
get: function(target,key,receiver){
return Reflect.get(target,key,receiver)
},
})
/*
receiver: 改变obj中getter/setter访问器中的this指向
obj = {
_name:'ds',
set name(value){
this._name = value
},
get name(){
return this._name
}
}
*/
/*
Reflect.construct(Super,[args],Student) Super.apply(this,[args])
创建的是Student类型,执行的是Super中的代码
*/
标签:name,Reflect,Proxy,key,receiver,target
From: https://www.cnblogs.com/hyf120/p/17026327.html