23 Proxy代理
proxy在目标对象的外层搭建了一层拦截,外界对目标对象的某些操作,必须通过这层拦截
1
| var proxy = new Proxy(target, handler);
|
new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| var target = { name: 'poetries' }; var logHandler = { get: function(target, key) { console.log(`${key} 被读取`); return target[key]; }, set: function(target, key, value) { console.log(`${key} 被设置为 ${value}`); target[key] = value; } } var targetWithLog = new Proxy(target, logHandler); targetWithLog.name; targetWithLog.name = 'others'; console.log(target.name);
|
targetWithLog 读取属性的值时,实际上执行的是 logHandler.get :在控制台输出信息,并且读取被代理对象 target 的属性。
- 在
targetWithLog 设置属性值时,实际上执行的是 logHandler.set :在控制台输出信息,并且设置被代理对象 target 的属性的值
1 2 3 4 5 6 7 8 9 10
| var proxy = new Proxy({}, { get: function(target, property) { return 35; } });
proxy.time proxy.name proxy.title
|
Proxy 实例也可以作为其他对象的原型对象
1 2 3 4 5 6 7 8
| var proxy = new Proxy({}, { get: function(target, property) { return 35; } });
|