高端网站开发公开课,潍坊市住房和城乡建设网站,百度竞价排名推广,深圳福田天气Proxy用于创建一个对象的代理#xff0c;从而实现基本操作的拦截和自定义#xff08;如属性查找、赋值、枚举、函数调用等#xff09; 1.用法
Proxy为 构造函数#xff0c;用来生成 Proxy实例
var proxy new Proxy(target, handler)参数
target表示所要拦截的目标对象… Proxy用于创建一个对象的代理从而实现基本操作的拦截和自定义如属性查找、赋值、枚举、函数调用等 1.用法
Proxy为 构造函数用来生成 Proxy实例
var proxy new Proxy(target, handler)参数
target表示所要拦截的目标对象任何类型的对象包括原生数组函数甚至另一个代理
handler通常以函数作为属性的对象各属性中的函数分别定义了在执行各种操作时代理 p 的行为
handler解析
关于handler拦截属性有如下
get(target,propKey,receiver)拦截对象属性的读取set(target,propKey,value,receiver)拦截对象属性的设置has(target,propKey)拦截propKey in proxy的操作返回一个布尔值deleteProperty(target,propKey)拦截delete proxy[propKey]的操作返回一个布尔值ownKeys(target)拦截Object.keys(proxy)、for...in等循环返回一个数组getOwnPropertyDescriptor(target, propKey)拦截Object.getOwnPropertyDescriptor(proxy, propKey)返回属性的描述对象defineProperty(target, propKey, propDesc)拦截Object.defineProperty(proxy, propKey, propDesc返回一个布尔值preventExtensions(target)拦截Object.preventExtensions(proxy)返回一个布尔值getPrototypeOf(target)拦截Object.getPrototypeOf(proxy)返回一个对象isExtensible(target)拦截Object.isExtensible(proxy)返回一个布尔值setPrototypeOf(target, proto)拦截Object.setPrototypeOf(proxy, proto)返回一个布尔值apply(target, object, args)拦截 Proxy 实例作为函数调用的操作construct(target, args)拦截 Proxy 实例作为构造函数调用的操作
Reflect
若需要在Proxy内部调用对象的默认行为建议使用Reflect其是ES6中操作对象而提供的新 API
基本特点
只要Proxy对象具有的代理方法Reflect对象全部具有以静态方法的形式存在修改某些Object方法的返回结果让其变得更合理定义不存在属性行为的时候不报错而是返回false让Object操作都变成函数行为
下面我们介绍proxy几种用法
get()
get接受三个参数依次为目标对象、属性名和 proxy 实例本身最后一个参数可选 var person {name: 张三
};var proxy new Proxy(person, {get: function(target, propKey) {return Reflect.get(target,propKey)}
});proxy.name // 张三get能够对数组增删改查进行拦截下面是试下你数组读取负数的索引 function createArray(...elements) {let handler {get(target, propKey, receiver) {let index Number(propKey);if (index 0) {propKey String(target.length index);}return Reflect.get(target, propKey, receiver);}};let target [];target.push(...elements);return new Proxy(target, handler);
}let arr createArray(a, b, c);
arr[-1] // c注意如果一个属性不可配置configurable且不可写writable则 Proxy 不能修改该属性否则会报错 const target Object.defineProperties({}, {foo: {value: 123,writable: false,configurable: false},
});const handler {get(target, propKey) {return abc;}
};const proxy new Proxy(target, handler);proxy.foo
// TypeError: Invariant check failedset()
set方法用来拦截某个属性的赋值操作可以接受四个参数依次为目标对象、属性名、属性值和 Proxy 实例本身
假定Person对象有一个age属性该属性应该是一个不大于 200 的整数那么可以使用Proxy保证age的属性值符合要求 let validator {set: function(obj, prop, value) {if (prop age) {if (!Number.isInteger(value)) {throw new TypeError(The age is not an integer);}if (value 200) {throw new RangeError(The age seems invalid);}}// 对于满足条件的 age 属性以及其他属性直接保存obj[prop] value;}
};let person new Proxy({}, validator);person.age 100;person.age // 100
person.age young // 报错
person.age 300 // 报错如果目标对象自身的某个属性不可写且不可配置那么set方法将不起作用 const obj {};
Object.defineProperty(obj, foo, {value: bar,writable: false,
});const handler {set: function(obj, prop, value, receiver) {obj[prop] baz;}
};const proxy new Proxy(obj, handler);
proxy.foo baz;
proxy.foo // bar注意严格模式下set代理如果没有返回true就会报错 use strict;
const handler {set: function(obj, prop, value, receiver) {obj[prop] receiver;// 无论有没有下面这一行都会报错return false;}
};
const proxy new Proxy({}, handler);
proxy.foo bar;
// TypeError: set on proxy: trap returned falsish for property foodeleteProperty()
deleteProperty方法用于拦截delete操作如果这个方法抛出错误或者返回false当前属性就无法被delete命令删除 var handler {deleteProperty (target, key) {invariant(key, delete);Reflect.deleteProperty(target,key)return true;}
};
function invariant (key, action) {if (key[0] _) {throw new Error(无法删除私有属性);}
}var target { _prop: foo };
var proxy new Proxy(target, handler);
delete proxy._prop
// Error: 无法删除私有属性注意目标对象自身的不可配置configurable的属性不能被deleteProperty方法删除否则报错
取消代理 Proxy.revocable(target, handler); 2.使用的场景
Proxy其功能非常类似于设计模式中的代理模式常用功能如下
拦截和监视外部对对象的访问降低函数或类的复杂度在复杂操作前对操作进行校验或对所需资源进行管理
使用 Proxy 保障数据类型的准确性
let numericDataStore { count: 0, amount: 1234, total: 14 };
numericDataStore new Proxy(numericDataStore, {set(target, key, value, proxy) {if (typeof value ! number) {throw Error(属性只能是number类型);}return Reflect.set(target, key, value, proxy);}
});numericDataStore.count foo
// Error: 属性只能是number类型numericDataStore.count 333
// 赋值成功声明了一个私有的 apiKey便于 api 这个对象内部的方法调用但不希望从外部也能够访问 api._apiKey
let api {_apiKey: 123abc456def,getUsers: function(){ },getUser: function(userId){ },setUser: function(userId, config){ }
};
const RESTRICTED [_apiKey];
api new Proxy(api, {get(target, key, proxy) {if(RESTRICTED.indexOf(key) -1) {throw Error(${key} 不可访问.);} return Reflect.get(target, key, proxy);},set(target, key, value, proxy) {if(RESTRICTED.indexOf(key) -1) {throw Error(${key} 不可修改);} return Reflect.get(target, key, value, proxy);}
});console.log(api._apiKey)
api._apiKey 987654321
// 上述都抛出错误还能通过使用Proxy实现观察者模式
观察者模式Observer mode指的是函数自动观察数据对象一旦对象有变化函数就会自动执行
observable函数返回一个原始对象的 Proxy 代理拦截赋值操作触发充当观察者的各个函数
const queuedObservers new Set();const observe fn queuedObservers.add(fn);
const observable obj new Proxy(obj, {set});function set(target, key, value, receiver) {const result Reflect.set(target, key, value, receiver);queuedObservers.forEach(observer observer());return result;
}观察者函数都放进Set集合当修改obj的值在会set函数中拦截自动执行Set所有的观察者
