关于javascript:Proxy学习

44次阅读

共计 2410 个字符，预计需要花费 7 分钟才能阅读完成。

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 拦截器，造成死循环

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', '张三')

在遇到某些业务时，能够用用 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)
  }