JavaScript代理模式

最新推荐文章于 2023-02-03 14:32:51 发布

Einstellung

最新推荐文章于 2023-02-03 14:32:51 发布

阅读量195

点赞数

分类专栏：前端文章标签： javascript 设计模式

本文链接：https://blog.csdn.net/Einstellung/article/details/111768687

版权

前端专栏收录该内容

33 篇文章 1 订阅

订阅专栏

本文通过明星和经纪人举例，解释了代理模式的概念，指出在ES6中，关键字Proxy可以方便地实现代理，允许我们间接获取或操作被代理的对象。

摘要由CSDN通过智能技术生成

代理模式举例

首先可以看一下代理模式局的一个例子：

class RealImg {
  constructor(fileName) {
    this.fileName = fileName
    // 模拟从硬盘初始化加载
    this.loadFromDisk()  
  }
  display() {
    console.log('display...' + this.fileName)
  }
  loadFromDisk() {
    console.log('loading...' + this.fileName)
  }
}

class ProxyImg {
  constructor(fileName) {
    this.realImg = new RealImg(fileName)
  }
  display() {
    this.realImg.display()
  }
}

// test
let proxyImg = new ProxyImg('1.png')
proxyImg.display()

这其实也有点类似于一个包装器。在ES6中有一个关键字Proxy，可以天然的让我们去实现代理。

Proxy

我们来举一个明星和经纪人的例子。你不能直接和明星联系，只能和经纪人打交道，以此来获得明星的信息。

let star = {
  name: '张xx',
  age: 25,
  phone: '12345678910'
}

let agent = new Proxy(star, {
  // target是要代理的对象，key是属性的值
  get: function (target, key) {
    if (key === 'phone') {
      // 返回经纪人自己的电话
      return '66666666'
    }
    if (key === 'price') {
      // 明星不报价，经纪人报价
      return 120000
    }
    // 其他情况
    // 可以获取name和age，这两个不保密，只有phone是保密的
    return target[key]
  },
  set: function (target, key, val) {
    if (key === 'customPrice') {
      if (val < 100000) {
        // 最低10w
        throw new Error('价格太低')
      } else {
        target[key] = val 
        return true
      }
    }
  }
})

// test
console.log(agent.name)
console.log(agent.age)

agent.customPrice = 150000