Proxy学习

1. proxy中的receiver和this？

let obj = new Proxy({}, {
  get: function (target, propKey, receiver) {
       return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {
       return Reflect.set(target, propKey, value, receiver);
  }
});

在get和set拦截里都可以看到有receiver这个参数，它到底是什么呢？我们可以理解为是最初被调用的对象，举个🌰：

let animal = {
  _name: '动物',
  getName: function() {
       console.log(this._name)
  }
}
  
const animalProxy = new Proxy(animal, {
  get(target, key, receiver) {
       console.log(receiver)
       return target[key]
  }
})

let pig = {
     _name: '猪',
     __proto__: animalProxy
}

// console.log(receiver) 为 对象animalProxy
// console.log(this._name) 为 动物
animalProxy.getName()

// console.log(receiver) 为 对象pig
// console.log(this._name) 为 猪
pig.getName()

在这个例子中，我们打印了this._name和receiver，可以发现其实与function中this的机制是一致的，谁调用就指向谁。

tips: 运行的时候不要在proxy中打印receiver，访问receiver时又会经过get拦截器，造成死循环

2. 代理具有内部插槽的内建对象

Map，Set，Date，Promise 等内置类型，都使用了所谓的"内部插槽"，类似于对象的私有属性，不允许外部访问，所以当代理没做处理时，直接代理他们会发生错误。

let map = new Map()
let mapProxy = new Proxy(map, {
  get(target, prop) {
    return target[prop]
  },
  set(target, prop, val) {
    target[prop] = val
    return true
  }
})

// Uncaught TypeError: Method Map.prototype.set called on incompatible receiver #<Map> at Proxy.set
mapProxy.set('name', '张三')

这样调用的话，this是指向 proxy 对象的，proxy对象上没有这个内部插槽属性，所以报错，一种处理方法是识别到调用内部插槽属性时改变this指向：

let mapProxy = new Proxy(map, {
  get(target, prop) {
    const value = target[prop]
    return typeof value === 'function'
      ? value.bind(target)
      : value
  }
})

// 成功
mapProxy.set('name', '张三')

3. Proxy.revocable撤销代理

在遇到某些业务时，可以用用Proxy.revocable去实现，实现与具体业务解耦，举个🌰：

  <button onClick='action.btnClick1()'>按钮1</button>
  <button onClick='action.btnClick2()'>按钮2</button>
  <button onClick='changeExtra()'>change extra</button>
  
  // 现在有几个按钮，点了以后会执行一些操作，
  // 还有一个配置开关，开启后点击这些按钮会触发一些额外的操作
  let action = {
    btnClick1: function() {
      console.log('点击按钮1')
    },
    btnClick2: function() {
      console.log('点击按钮2')
    }
  }

  let extraAction = {
    btnClick1: function() {
      console.log('按钮1额外操作')
    },
    btnClick2: function() {
      console.log('按钮2额外操作')
    }
  }

  const actions = new WeakMap()
  const revokes = new WeakMap()
  const proxyAction = (action) => {
    const { proxy, revoke } = Proxy.revocable(action, {
      get(target, key) {
        // 如果有额外操作就执行
        if (extraAction[key]) {
          extraAction[key]()
        }
        return Reflect.get(...arguments)
      }
    })
    revokes.set(proxy, revoke)
    actions.set(proxy, action)
    return proxy
  }

  const revokeAction = (action) => {
    const revoke = revokes.get(action)
    if (revoke) {
      revoke()
      // revoke了就返回原始对象
      return actions.get(action)
    } else {
      return action
    }
  }

  let isExtra = false
  const changeExtra = () => {
    isExtra = !isExtra
    action = isExtra ? proxyAction(action) : revokeAction(action)
  }

结尾

我是周小羊，一个前端萌新，写文章是为了记录自己日常工作遇到的问题和学习的内容，提升自己，如果您觉得本文对你有用的话，麻烦点个赞鼓励一下哟~