1

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._namereceiver,可以发现其实与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)
  }

结尾

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

小绵羊
65 声望517 粉丝