聊聊ES6的Proxy和Reflect

一、Proxy

proxy即为“代理”。(中间商,不赚差价的那种,哈哈哈…)
proxy为对象设置访问代理期的,使用方便,功能强大
语法:let p = new Proxy(target,handler)
target:目标对象
handler:拦截过滤代理的函数

const person = {
    name:'wyy',
    age:'20'
}
const personProxy = new Proxy(person,{
    deleteProperty(target,property){
        console.log("del", property)
        delete target[property]
    },
    get(target,property){
        return property in target ? target[property]:'default'
    },
    set(target,key,value){
        if(key=='age' && key<1){
            console.log('参数错误')
        }else{
            target[key] = value
        }

    },
})
console.log(personProxy.name) // wyy 
delete personProxy.age  // 删除person对象中的age属性
personProxy.name='wyy2' // 修改person对象中的name属性
personProxy.sex='女'  // 给person对象增加sex属性,并赋值‘女’
console.log(person)  // { name:'wyy2' , sex:'女'}

2.除了上面方法,还有以下:
(我也没试过,用到再看吧。)

方法描述
handler.apply()拦截 Proxy 实例作为函数调用的操作
handler.construct()拦截 Proxy 实例作为函数调用的操作
handler.defineProperty()拦截 Object.defineProperty() 的操作
handler.deleteProperty()拦截 Proxy 实例删除属性操作
handler.get()拦截 读取属性的操作
handler.getOwnPropertyDescriptor()拦截 Object.getOwnPropertyDescriptor() 的操作
handler.getPrototypeOf()拦截 获取原型对象的操作
handler.has()拦截 属性检索操作
handler.isExtensible()拦截 Object.isExtensible()操作
handler.ownKeys()拦截 Object.getOwnPropertyDescriptor() 的操作
handler.preventExtension()拦截 Object().preventExtension() 操作
handler.setPrototypeOf()拦截Object.setPrototypeOf()操作
Proxy.revocable()创建一个可取消的 Proxy 实例

二、Reflect

与Proxy相同,也是ES6新增。
它新增了一些方法,这些方法可以使一些操作更加规范化,更加便利。对象有如下特点:
(1)只要Proxy对象具有的代理方法,Reflect对象全部具有,以静态方法的形式存在。这些方法能够执行默认行为,无论Proxy怎么修改默认行为,总是可以通过Reflect对应的方法获取默认行为。
(2)新增的方法与现有一些方法功能重复,新增的方法会取代现有的方法,比如Reflect.getPrototypeOf(),Object对象具有同样的方法,功能也相同,但是将getPrototypeOf()方法移植到Reflect更加合理。还有一些新增方法用来取代现有的命令式操作,比如判断属性是否存在的in命令,用Reflect.has()方法替代。

// // Reflect 统一提供一套用于操作对象的api
const obj2 = {
    name:'wyy',
    age:18,
    sex:'女'
}
console.log('name' in obj2) // true
console.log(Reflect.has(obj2,'name')) //true  //判断是否有name属性
console.log(Reflect.deleteProperty(obj2,'sex')) //true  // 对象删除sex属性
console.log(Reflect.ownKeys(obj2)) // [ 'name', 'age' ] // 获取对象的所有属性值
方法描述
handler.apply()通过指定的参数列表发起对目标函数的调用
handler.construct()此方法行为有点像 new 操作符构造函数,相当于运行 new target(…args)
handler.defineProperty()方法功能类似于Object.defineProperty()方法
handler.deleteProperty()功能类似于delete运算符
handler.get()从对象获取指定属性值
handler.set()设置指定对象的属性,比如为对象添加新属性或者修改原有属性的值
handler.getOwnPropertyDescriptor()功能类似于Object.getOwnPropertyDescriptor()
handler.getPrototypeOf()获取对象的原型对象
handler.preventExtension()将对象设置为不可扩展
handler.isExtensible()判断一个对象是否是可扩展的
handler.ownKeys()返回一个数组,此数组中包含有参数对象自有属性名称
handler.setPrototypeOf()设置指定对象的原型对象
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值