JavaScript之代理

代理

let o = {
  name: 'xiaoming',
  price: 190
}
let d = new Proxy(o, {
  get (target, key) {
    if (key === 'price') {
      return target[key] + 20
    } else {
      return target[key]
    }
  }
})
console.log(d.price, d.name)

Object.defineProperty():添加更改方法

读懂属性描述符

值

let o = {
  name: 'xiaoming',
  price: 190
}

只读

es5

for (const [key] of Object.entries(o)) { // entries将对象变为键值对
  // 属性描述符
  Object.defineProperty(o, key, {
    writable: false // 是否可写
  })
}
o.price = 300
console.log(o.name, o.price)

es6

let d = new Proxy(o, {
  get (target, key) {
    return target[key]
  },
  set (target, key, value) { // o price 300 类 属性 值
    return false
  }
})
d.price = 300 // 因为set为false无法改变
console.log(d.price, d.name)

校验

let d = new Proxy(o, {
  get (target, key) {
    return target[key] || ''
  },
  set (target, key, value) {
    if (Reflect.has(target, key)) {
      if (key === 'price') {
        if (value > 300) {
          return false
        } else {
          target[key] = value
        }
      }
    } else {
      return false
    }
  }
})
d.price = 543 // price大于300的值赋值不了
d.age = 'fdsf'// 属性不存在，赋值失败
console.log(d.price, d.name，d.age) 

• 将set方法拿出

let validator = (target, key, value) => {
  if (Reflect.has(target, key)) {
    if (key === 'price') {
      if (value > 300) {
        return false
      } else {
        target[key] = value
      }
    }
  } else {
    return false
  }
}
let d = new Proxy(o, {
  get (target, key) {
    return target[key] || ''
  },
  set: validator
})

代理和变量管理

class Component {
  constructor () {
    this.proxy = new Proxy({
      id: Math.random().toString(36).slice(-8) // 36进制截取后8位
    }, {})
  }

  get id () {
    return this.proxy.id
  }
}

let com = new Component()
let com2 = new Component()
com.id = 43242
for (let i = 0; i < 10; i++) {
  console.log(com.id, com2.id)
}

撤销

使用revoke将代理撤销

let d = Proxy.revocable(o, {
  get (target, key) {
    if (key === 'price') {
      return target[key] + 20
    } else {
      return target[key]
    }
  }
})
console.log(d.proxy.price, d)
setTimeout(function () {
  d.revoke()
  setTimeout(function () {
    console.log(d.proxy.price)
  }, 100)
}, 1000)

ES6 Proxies in Depth

Meta Programming In JavaScript-Part Three: Proxies and Reflection

10 Use Cases for Proxy

How to Use Proxies

ES6 Proxies in practice