白筱汐

想都是问题，做都是答案

0%

JavaScript设计模式——代理模式

发表于 分类于

代理模式

代理模式又称委托模式，它为目标对象创建一个代理对象，以控制对目标对象的访问。

ES5 使用 Object.defineProperty(obj,prop,descriptor) 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var target = {
  name: 'Tom',
  age: 25
}

var proxy = {}

Object.keys(target).forEach(function (prop) {
  Object.defineProperty(proxy, prop, {
    get: function () {
      console.log('访问属性 ' + prop);
      return target[prop]
    },
    set: function (value) {
      console.log('设置属性 ' + prop + ' 为 ' + value);
      target[prop] = value
    }
  })
})

console.log(proxy.name); // 访问属性 name \n Tom
proxy.age = 28 // 设置属性 age 为 28
console.log(proxy.age); // 设置属性 age \n 28

ES6 使用 new Proxy(target,handle) 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const targetObj = {
  name: 'Jerry',
  age: 20
}

const proxyObj = new Proxy(targetObj, {
  get: function (target, prop) {
    console.log('访问属性 ' + prop);
    return target[prop]
  },
  set: function (target, prop, value) {
    console.log('设置属性 ' + prop + ' 为 ' + value);
    target[prop] = value
  }
})

console.log(proxyObj.name); // 访问属性 name \n Jerry
proxyObj.age = 25; // 设置属性 age \n 25
console.log(proxyObj.age); // 设置属性 age \n 25