脚本宝典收集整理的这篇文章主要介绍了es6基础0x020:代理,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
0x000 概述
代理嘛,就是请代理人代替自己做某件事,但是和自己不一样的是代理人可以有自己的行为,甚至可以做出和预期相违背的行为。
0x001 栗子
let origin={
name: 'origin'
}
声明一个代理对象
let proxy=new Proxy(origin, {
get: (target, key)=>target[key]+" from proxy",
set: (target, key, value)=>target[key]="set by proxy "+value
})
此时输出origin
和proxy
,可以发现,proxy
拥有和origin
一样的name
属性
console.LOG(origin) // {name: 'origin'}
console.log(proxy) // Proxy {name: 'origin'}
为origin
添加age
属性,再输出,可以发现,origin
和proxy
都拥有了age
属性
origin.age=1
console.log(origin) // {name: 'origin', age: '1'}
console.log(proxy) // Proxy {name: 'origin', age '1'}
那就是代理吗,当然不是,我们尝试为proxy
添加属性
proxy.x=1
console.log(origin) // {name: 'origin', age: '1', x:'set by proxy 1'}
console.log(proxy) // Proxy {name: 'origin', age '1'}
可以发现,虽然origin
和proxy
都拥有了x
属性,但是并不是我们赋值的1
,而是多了set by proxy
几个字符串,很明显,这里是执行了初始化proxy
时传入的第二个对象的set
方法
那如果我们get
呢
console.log(proxy.x) // set by proxy 1
console.log(proxy.x) // set by proxy 1 from proxy
现在很清楚了,proxy
就是origin
的代理,所有在proxy
上的操作都会同步到origin
上,而对origin
的操作却不会同步到proxy
上,而且proxy
还有自己的行为。
可以这么想,proxy
就是origin
的秘书,所有的事务处理都要提交给秘书,秘书有自己的办事准则,可以直接提交给老板,也可以拒绝提交,或者添加一些其他的行为再提交。那这个秘书到底能代理老板做哪些事呢?
0x002 陷阱
-
语法
let p = new Proxy(target, handler);
初始化一个代理需要有两个参数
-
target
:代理目标
-
handle
:陷阱,是一个对象,我们的操作就像一只逃跑的动物,如果猎人在所有可以逃跑的路上全部放满了陷阱,那我们总是会落入一起一个的。本质就是一个对象,键描述我们的操作,值是函数,描述我们的行为,一共有13
种陷阱。
0x003 set
:设置属性
-
语法:
set(target, key, value)
-
target
: 代理对象
- `key: 设置的属性
-
value
: 设置的属性值
-
栗子:
let origin={}
let proxy=new Proxy(origin,{
set:(target, key, value)=>{
if(value>5)target[key]=value+10000
}
})
proxy.x=1
proxy.y=10
console.log(proxy) // Proxy {y: 10010}
console.log(origin) // {y: 10010}
- 说明:
上面我们放置了一个set
陷阱,当我们做set
操作的时候,就会被捕捉到,我们判断value
是否大于5
,如果不大于5
我们就不会做任何东西,但是如果大于5
,就会给做赋值操作,并且还将他加上了10000
。上面的栗子就相当于一个拦截器了。
0x004 get
:访问属性
-
语法:
get(target, key)
-
target
: 代理对象
- `key: 访问的属性
-
栗子:
let origin={
x:1,
y:2
}
let proxy=new Proxy(origin,{
get:(target, key)=>{
if(key==='x')return 'no'
return target[key]
}
})
console.log(proxy.x) // 'no'
console.log(proxy.y) // 2
0x005 deleteProperty
:删除属性
-
语法:
deleteProPErty(target, key)
-
target
: 代理对象
- `key: 要删除的属性
-
栗子:
let origin={
x:1,
y:2
}
let proxy=new Proxy(origin,{
deleteProperty:(target, key)=>{
if(key==='x')return
delete target[key]
}
})
delete proxy.x
delete proxy.y
console.log(proxy) // {x:1}
0x006 has
:判断是否包含某属性
-
语法:
has(target, key)
-
target
: 代理对象
- `key: 要判断的属性
-
栗子:
let origin={
x:1,
y:2
}
let proxy=new Proxy(origin,{
has:(target, key)=>{
if(key==='x')return false
return true
}
})
console.log('x' in proxy) // false
console.log('y' in proxy) // true
0x007 ownKeys
:获取自身属性值
-
语法:
ownKeys(target)
-
target
: 代理对象
-
栗子:
let origin={
x:1,
y:2
}
let proxy=new Proxy(origin,{
ownKeys:(target)=>{
return ['y']
}
})
console.log(Object.getOwnPropertyNames(proxy)) // ['y']
0x008 getPrototypeOf
:获取prototype
-
语法:
getPrototypeOf(target)
-
target
: 代理对象
-
栗子
let origin={
x:1,
y:2
}
let proxy=new Proxy(origin,{
getPrototypeOf:(target)=>{
return null
}
})
console.log(Object.getPrototypeOf(p)) // null
0x009 setPrototypeOf
:设置prototype
-
语法:
setPrototypeOf(target, prototype)
-
target
: 代理对象
-
prototype
: 要设置的prototype
-
栗子
let origin={
x:1,
y:2
}
let proxy=new Proxy(origin,{
setPrototypeOf:(target, prototype)=>{
throw 'no'
}
})
Object.setPrototypeOf(proxy, {}) // Uncaught no
0x010 defineProperty
:设置属性描述
-
语法:
defineProperty(target, prop, descriptor)
-
target
: 代理对象
-
prop
: 要设置描述的属性
-
descriptor
: 描述
-
栗子
let origin={}
let proxy=new Proxy(origin,{
defineProperty:(target, prop, descriptor)=>{
throw 'no'
}
})
Object.defineProperty(proxy, 'x', {configurable: true}) // Uncaught no
0x011 getOwnPropertyDescriptor
:获取自身属性描述
-
语法:
getOwnPropertyDescriptor(target, prop)
-
target
: 代理对象
-
prop
: 获取描述的属性
-
栗子
let origin={}
let proxy=new Proxy(origin,{
getOwnPropertyDescriptor:(target, prop)=>{
throw 'no'
}
})
Object.getOwnPropertyDescriptor(proxy, 'x') // Uncaught no
0x012 isExtensible
:判断是否可扩展
-
语法:
isExtensible(target)
-
target
: 代理对象
-
栗子
let origin={}
let proxy=new Proxy(origin,{
isExtensible:(target)=>{
return false
}
})
console.log(Object.isExtensible(proxy)); // false
0x013 preventextensions
:阻止扩展
-
语法:
preventExtensions(target)
-
target
: 代理对象
-
栗子:
let origin={}
let proxy=new Proxy(origin,{
preventExtensions:(target)=>{
return false;
}
})
console.log(Object.preventExtensions(proxy)); // Uncaught TypeError: 'preventExtensions' on proxy: trap returned falsish
0x014 construct
:构造
-
语法:
construct(target, argumentsList, newTarget)
-
栗子:
let Origin=function(){}
let OriginProxy=new Proxy(Origin,{
construct: function(target, argumentsList, newTarget) {
throw 'error'
}
})
new OriginProxy() // Uncaught error
@H_549_1263@0x015 apply
:调用
以上是脚本宝典为你收集整理的es6基础0x020:代理全部内容,希望文章能够帮你解决es6基础0x020:代理所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。