ES6_proxy_note_牛客博客

proxy:代理

Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改，所以属于一种“元编程”(meta programming),即对编程语言进行编程

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

主要是扩展 / 增强对象的一些功能

比如说 Vue中的 Vue.key.Codes.enter=65

proxy作用:

Vue中的拦截,上报,扩展功能,统计,增强功能等的

proxy是设计模式的一中,代理模式

语法:
new Proxy(target,handler);

let obj = new Proxy(被代理的对象,对对立对象的操作)

注意:被代理的对象可以是null

hander是一个json:
<script > {
      set(){
     },//设置的时候干的事 get(){
     },// 获取对象属性 deleteProperty(){
     },//删除 has(){
     },//判断有没有 apply(){
     }//调用函数的处理 // 等等 } </script>

如:利用proxy创建元素:

<script > const DOM = new Proxy({
     }, {
      get(target, property) {
      // property 就是 DOM.xx 里面的xxx // console.log(target, property); // ...:扩展剩余参数 return function (attr = {
     }, ...children) {
      // console.log(attr, children); const el = document.createElement(property); for (let key of Object.keys(attr)) {
      // 为el添加属性 el.setAttribute(key, attr[key]); } //再添加子元素 for (let child of children) {
      if (typeof child == 'string') {
      child = document.createTextNode(child); } el.appendChild(child); } return el; } } }); let oDiv = DOM.div({
     id: 'div1', class: 'aaa'}, '我是div', '呵呵呵'); console.log(oDiv); </script>

利用proxy创建元素及其子元素:

<script > const DOM = new Proxy({
     }, {
      get(target, property) {
      // property 就是 DOM.xx 里面的xxx // console.log(target, property); // ...:扩展剩余参数 return function (attr = {
     }, ...children) {
      // console.log(attr, children); const el = document.createElement(property); for (let key of Object.keys(attr)) {
      // 为el添加属性 el.setAttribute(key, attr[key]); } //再添加子元素 for (let child of children) {
      if (typeof child == 'string') {
      child = document.createTextNode(child); } el.appendChild(child); } return el; } } }); //只要用DOM创建元素就调用了代理 let oDiv = DOM.div({
     id: 'div1', class: 'aaa'}, '我是div', '呵呵呵'); console.log(oDiv); </script>

使用set进行拦截和
实现一个,访问对象身上的属性,默认不存在的时候返回undefined,希望如果不存在,返回错误(警告)信息,如:

<script > {
      // 使用set进行拦截 let obj = new Proxy({
     }, {
      set(target, prop, value) {
      console.log(target, prop, value); } }); obj.a = 132; console.log("split---"); } // 设置一个年龄保证为整数,大于18,不能超过200 let obj = new Proxy({
     }, {
      set(target, prop, value) {
      if (prop == 'age') {
      if (!Number.isInteger(value)) {
      throw new TypeError(`年龄必须为整数`); } if (value > 200) {
      throw new RangeError(`年龄超标了,必须小于200岁`); } } target[prop] = value; } }); obj.a = 123; obj.name = 'kirin'; console.log(obj); // 报错 // obj.age = 13.5; obj.age = 13; /* deleteProperty():删除,拦截 has():检测有没有 * */ </script>

利用proxy删除与判断:

<script > let json = {
      a: 1, b: 2 }; let newJson = new Proxy(json, {
      deleteProperty(target, property) {
      console.log(`你要删除${
       property}属性`); //TODO delete target[property]; }, has(target, property) {
      console.log(`你判断是否存在,调用has方法了`); //TODO return property in target; } }); console.log('a' in newJson); delete newJson.a; console.log(newJson); </script>

apply():拦截方法

<script > function fn() {
      return `我是函数`; } let newFn = new Proxy(fn, {
      apply(target, thisArg, argArray) {
      return `函数吗?` } }); console.log(newFn()); </script>

Reflect.apply(调用的函数,this指向,参数数组);
利用apply进行拦截方法:

<script > function sum(a, b) {
      return a + b; } let newSum = new Proxy(sum, {
      apply(target, context, args) {
      // context:指向 // console.log(target, context, args); // console.log(...arguments) // Reflect:反射 return Reflect.apply(...arguments)**2; } }) console.log(newSum(2, 3)); </script>

还有:

<script > // console.log(Math.ceil(5.4)); // let rel = Reflect.apply(Math.ceil, null, [9.8]); // console.log(rel); function show(...args) {
      console.log(this) console.log(args); } // show(1,2,3,4); // show.call('abc', 1, 2, 3, 4); // show.apply('abc', [1, 2, 3, 4]); Reflect.apply(show, 'aaaa', [1, 2, 3, 4]); </script>

Reflect:反射

<script > // 之前的检测方法 console.log('assign' in Object); // 以后的检测方法可能一直是: console.log(Reflect.has(Object, 'assign')); </script>

还有:

<script > let json = {
     a: 1, b: 2}; /*delete json.a;//删除 console.log(json);*/ Reflect.deleteProperty(json, 'a');//删除 console.log(json); </script>

Object.xxxx 语言内部的方法

Object.defineProperty

放到Reflect对象身上

通过Reflect对象身上直接拿到语言内部东西