关于javascript: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)
  }

结尾

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