白筱汐

想都是问题,做都是答案

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