乐趣区

关于ecmascript:ProxyReflect

Proxy

Proxy 能够了解成,在指标对象之前架设一层“拦挡”,外界对该对象的拜访,都必须先通过这层拦挡,因而提供了一种机制,能够对外界的拜访进行过滤和改写。Proxy 这个词的原意是代理,用在这里示意由它来“代理”某些操作,能够译为“代理器”

监督某个对象的属性读写 Object.defineProperty(vue3.0 之前,3.0 之后应用 proxy)

  • 简略介绍下 Object.defineProperty

    Object.defineProperty(obj,"key",{enumerable:false, //key 属性是否能够在 for..in || Object.keys() 中被枚举
    configurable:false, //key 属性是否可被删除,以及除 value 和 writable 个性外的其余个性是否能够被批改
    writable:false, // 不可写入,也就是不可更改 obj.key
    value:undefined,
    get:undefined,
    set:undefined
    })
  • 初始化一个 new Proxy 实例

    const person ={
    name:"mcgee",
    age:18
    }
    // 创立 proxy 构造函数,参数 1 代理的对象,参数 2 执行对象
    const personProxy = new Proxy(person,{get(target,property){// console.log(target,property); //{name: 'mcgee', age: 18} name
      // return 100 // 内部拜访属性的返回值 返回值能够是任意类型
      return property in target ? target[property]:'default'
    },
    set(target,property,value){// console.log(target,property,value);
      if(property === "age" && !Number.isInteger(value)){throw new Error(`${value} is not an int`)
      }
    
      return target[property] == value // 返回值能够是任意类型
    }
    })
    
    console.log(personProxy.name) //100 "mcgee"
    console.log(personProxy.xxx); //default
    personProxy.render = true
    console.log(personProxy); // 增加了个 render 为 true 的属性
    // personProxy.age = "aa"  //Error: aa is not an int

    具体 13 个办法例子详见此处

ES6 阮一峰教程

Reflect

动态类,不能通过 new 结构实例对象,只能调动态类的静态方法,相似于 Math 对象

外部封装了一系列对对象的底层操作

Reflect 成员办法就是 Proxy 解决对象的默认实现,它的价值,对立提供了一套用于操作对象的 API

const obj = {
  name:"mcgee",
  age:18
}
const proxy1 = new Proxy(obj,{get(target,property){         // 如果没增加 get 办法,外部默认应用了增加了 reflect 的办法
    return Reflect.get(target,property)
  }
})
console.log(proxy1.name);
// 传统的拜访
console.log("name" in proxy1);
console.log(delete obj['age']);
console.log(Object.keys(obj));
// 应用 reflect 拜访
Reflect.has(obj,"name")
Reflect.deleteProperty(obj,"age")
Reflect.ownKeys(obj)
退出移动版