0
点赞
收藏
分享

微信扫一扫

ES6----Proxy(一)

Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。

听起来好像很绕,可以简单这样理解,Proxy相当于JavaScript对象的一个代理,通过Proxy的配置,可以实现对所代理的对象实现一些拦截和

私有化定制。

 

ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。

1 var proxy = new

通常,Proxy有以下几种形式:

1 get(target, propKey, receiver):拦截对象属性的读取,比如proxy.foo和proxy['foo']。
2 set(target, propKey, value, receiver):拦截对象属性的设置,比如proxy.foo = v或proxy['foo'] = v,返回一个布尔值。
3 has(target, propKey):拦截propKey in proxy的操作,返回一个布尔值。
4 deleteProperty(target, propKey):拦截delete proxy[propKey]的操作,返回一个布尔值。
5 ownKeys(target):拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
6 getOwnPropertyDescriptor(target, propKey):拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。
7 defineProperty(target, propKey, propDesc):拦截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一个布尔值。
8 preventExtensions(target):拦截Object.preventExtensions(proxy),返回一个布尔值。
9 getPrototypeOf(target):拦截Object.getPrototypeOf(proxy),返回一个对象。
10 isExtensible(target):拦截Object.isExtensible(proxy),返回一个布尔值。
11 setPrototypeOf(target, proto):拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。
12 apply(target, object, args):拦截 Proxy 实例作为函数调用的操作,比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
13

下面将会结合实例做具体介绍:

1.get

​get​​方法用于拦截某个属性的读取操作,可以接受三个参数,依次为目标对象、属性名和 proxy 实例本身(严格地说,是操作行为所针对的对象),其中最后一个参数可选。

1 var person = {
2 name: "张三"
3 };
4
5 var proxy = new Proxy(person, {
6 get: function(target, property) {
7 if (property in target) {
8 return target[property];
9 } else {
10 throw new ReferenceError("Property \"" + property + "\" does not exist.");
11 }
12 }
13 });
14
15 proxy.name // "张三"
16 proxy.age // 抛出一个错误

很简单,OK!

升华以下,​​get​​方法可以继承。

1 let proto = new Proxy({}, {
2 get(target, propertyKey, receiver) {
3 console.log('GET ' + propertyKey);
4 return target[propertyKey];
5 }
6 });
7
8 let obj = Object.create(proto);
9 obj.foo // "GET foo"

2.set

​set​​方法用来拦截某个属性的赋值操作,可以接受四个参数,依次为目标对象、属性名、属性值和 Proxy 实例本身,其中最后一个参数可选。

是不是和get方法大同小异,在读取被代理对象的属性时,该方法会执行;

1 let validator = {
2 set: function(obj, prop, value) {
3 if (prop === 'age') {
4 if (!Number.isInteger(value)) {
5 throw new TypeError('The age is not an integer');
6 }
7 if (value > 200) {
8 throw new RangeError('The age seems invalid');
9 }
10 }
11
12 // 对于满足条件的 age 属性以及其他属性,直接保存
13 obj[prop] = value;
14 }
15 };
16
17 let person = new Proxy({}, validator);
18
19 person.age = 100;
20
21 person.age // 100
22 person.age = 'young' // 报错
23 person.age = 300 // 报错

上面代码中,由于设置了存值函数​​set​​​,任何不符合要求的​​age​​属性赋值,都会抛出一个错误,这是数据验证的一种实现方法。利用​​set​​方法,还可以数据绑定,即每当对象发生变化时,会自动更新 DOM。

我们知道,JavaScript语言中没有私有变量一说,通常的做法是在属性名称前加‘_’表示属性为对象内部私有,但这只是一种通用的约定,在语言的内部并没有限制对“私有属性”的访问。

但是有了Proxy后就可以有效解决。see code

1 const handler = {
2 get (target, key) {
3 invariant(key, 'get');
4 return target[key];
5 },
6 set (target, key, value) {
7 invariant(key, 'set');
8 target[key] = value;
9 return true;
10 }
11 };

// 这一个函数实现了对私有属性访问权限的控制
12 function invariant (key, action) {
13 if (key[0] === '_') {
14 throw new Error(`Invalid attempt to ${action} private "${key}" property`);
15 }
16 }
17 const target = {};
18 const proxy = new Proxy(target, handler);
19 proxy._prop
20 // Error: Invalid attempt to get private "_prop" property
21 proxy._prop = 'c'
22 // Error: Invalid attempt to set private "_prop" property

上面代码中,只要读写的属性名的第一个字符是下划线,一律抛错,从而达到禁止读写内部属性的目的。

有一点需要注意:​​set​​​方法的第四个参数​​receiver​​​,指的是原始的操作行为所在的那个对象,一般情况下是​​proxy​​实例本身

1 const handler = {
2 set: function(obj, prop, value, receiver) {
3 obj[prop] = receiver;
4 }
5 };
6 const proxy = new Proxy({}, handler);
7 const myObj = {};
8 Object.setPrototypeOf(myObj, proxy);
9
10 myObj.foo = 'bar';
11 myObj.foo === myObj // true

 

// 稍微注意一下~~~~

上面代码中,设置​​myObj.foo​​​属性的值时,​​myObj​​​并没有​​foo​​​属性,因此引擎会到​​myObj​​​的原型链去找​​foo​​​属性。​​myObj​​​的原型对象​​proxy​​​是一个 Proxy 实例,设置它的​​foo​​​属性会触发​​set​​​方法。这时,第四个参数​​receiver​​​就指向原始赋值行为所在的对象​​myObj​​。

还有一点需要注意,如果目标对象自身的某个属性,不可写且不可配置,那么​​set​​方法将不起作用

1 const obj = {};
2 Object.defineProperty(obj, 'foo', {
3 value: 'bar',
4 writable: false,
5 });
6
7 const handler = {
8 set: function(obj, prop, value, receiver) {
9 obj[prop] = 'baz';
10 }
11 };
12
13 const proxy = new Proxy(obj, handler);
14 proxy.foo = 'baz';
15 proxy.foo // "bar"

上面代码中,​​obj.foo​​​属性不可写,Proxy 对这个属性的​​set​​代理将不会生效。

贪多嚼不烂,先到这里吧~~~~




举报

相关推荐

0 条评论