Proxy 用于修改某些操作的默认行为(基本操作有属性查找,赋值,枚举,函数调用等)。
/*
* target 目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)
* handler 一个对象,其属性是操作对应的自定义代理函数
*/
let p = new Proxy(target, handler);
1、get(target, propKey, receiver):拦截对象属性的读取
/*
* target 目标对象
* propKey 对象属性名
* proxy 实例本身(严格地说,是操作行为所针对的对象)
*/
get(target, propKey, receiver)
var obj = {name : 'Lucy'}
var p = new Proxy(obj,{
get : function(target,key,receive){
return key === 'name' ? 'Hello '+target[key] : target[key]
}
})
p.name //Hello Lucy
需要注意的是,如果一个属性不可配置(configurable)且不可写(writable),则 Proxy 不能修改该属性。
var obj = Object.defineProperties({}, {
name: {
value: 'Lucy',
writable: false,
configurable: false
},
});
var p = new Proxy(obj, {
get : function(target,key){
return key === 'name' ? 'Hello '+target[key] : target[key]
}
});
p.name //报错
2、set: function(obj, prop, value,receive) : 拦截某个属性的赋值操作
/*
* target 目标对象
* key 属性名
* value 属性值
* receive 代理本身
*/
set: function(target, key, value,receive)
var obj = {age : 18}
var p = new Proxy(obj,{
set : function(target,key,value){
if(key === 'age'){
target[key] = Math.min(value,100);
}else{
target[key] = value;
}
}
})
p.age = 101;
p.age // 100
obj.age // 100
3、has(target, key):拦截key in proxy的操作,返回一个布尔值。
4、deleteProperty(target, propKey):拦截delete proxy[propKey]的操作,返回一个布尔值。
5、ownKeys(target):ownKeys方法用来拦截对象自身属性的读取操作,返回一个数组。具体来说,拦截以下操作:
var obj = Object.create(null)
Object.defineProperties(obj, {
'_id': {
value: 1,
configurable : true,
writable : true,
enumerable : true
},
'name': {
value : 'Lucy',
configurable : true,
writable : true,
enumerable : true
}
});
Object.getOwnPropertyNames(obj) // ['_id','name']
for(let key in obj){
console.log(key) //依次输出_id,name
}
var p = new Proxy(obj,{
ownKeys : function(target){
return Object.getOwnPropertyNames(target).filter(x => x[0] != '_')
}
})
Object.getOwnPropertyNames(p) // ['name']
for(let key in p){
console.log(key) //输出name
}
6、getOwnPropertyDescriptor(target, propKey):拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。
7、defineProperty(target, propKey, propDesc):返回一个布尔值,拦截以下操作
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 实例作为函数调用的操作,比如
13、construct(target, args):拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(...args)。
ES6 中引入Proxies,让你可以自定义Object的基本操作。例如,get就是Object的基础操作方法。
ES6中提出了一个新的特性,就是proxy,用来拦截在一个对象上的指定操作。这个功能非常的有用。每当代理对象被赋值,处理器函数就会调用,这样就可以用来调试某些问题。
Proxy是什么意思?Proxy是ES6中提供的新的API,可以用来定义对象各种基本操作的自定义行为,在我们需要对一些对象的行为进行控制时将变得非常有效。
我们或多或少都听过数据绑定这个词,数据绑定”的关键在于监听数据的变化,可是对于这样一个对象:var obj = {value: 1},我们该怎么知道 obj 发生了改变呢?ES5 提供了 Object.defineProperty 方法,该方法可以在一个对象上定义一个新属性
使用Proxy,你可以将一只猫伪装成一只老虎。下面大约有6个例子,我希望它们能让你相信,Proxy 提供了强大的 Javascript 元编程。尽管它不像其他ES6功能用的普遍,但Proxy有许多用途
这篇文章提到 Proxy 这种语法可以用来封装 sessionStorage、 localStorage 甚至是 IndexedDB。可以使用 Proxy 代理来使 API 更容易使用。首先介绍一下 Proxy 的基本用法:
通常,当谈到JavaScript语言时,我们讨论的是ES6标准提供的新特性,本文也不例外。 我们将讨论JavaScript代理以及它们的作用,但在我们深入研究之前,我们先来看一下Proxy的定义是什么。
通过调用new proxy()你可以创建一个代理来替代另一个对象(被称为目标),这个代理对目标对象进行了虚拟,因此该代理与该目标对象表面上可以被当做同一个对象来对待。
Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种『元编程』即对编程语言进行编程。Proxy 是在目标对象之前架设一层『拦截』,外部对对象的访问,都需要经过该层拦截。因此在拦截中对外界的访问进行过滤和改写。
Proxy是ES6规范定义的标准内置对象,可以对目标对象的读取、函数调用等操作进行拦截。一般来说,通过Proxy可以让目标对象“可控”,比如是否能调用对象的某个方法,能否往对象添加属性等等。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!