Proxy
Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta
programming),即对编程语言进行编程。
在ES6文章中看到这句概述,我一下很难理解。看了很多了博客综合认识之后,自己对于 Proxy有了一个初步的认识。
简单来说,Proxy使用后,可以由自己来定义对象调用的方法。例如:在进行对象属性的调用时,你可以在调用属性时,自己来定义此调用应该如何实现。即用自己的定义覆盖了语言的原始定义。
1.概述
ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。
var proxy = new Proxy(target, handler);
Proxy 对象的所有用法,都是上面这种形式,不同的只是handler参数的写法。
target
参数表示所要拦截的目标对象handler
参数也是一个对象,用来定制拦截行为(其属性为调用对象时,要执行的函数)
下面来看一个例子
var proxy = new Proxy({}, {
get(target, property) {
return 35;
}
});
proxy.time // 35
proxy.name // 35
proxy.title // 35
上面的代码,先实例化了 Proxy函数 ,然后传了两个参数,第一个目标对象(target)。第二个为一个对象(handle),里面的get方法放置了一些自己定义的拦截操作。
get
方法中也有两个参数,target
代表了传入的目标函数,property
代表了目标函数的属性
如果handler没有设置任何拦截,那就等同于直接通向原对象。
var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
target.a // "b"
上面代码中,handler是一个空对象,没有任何拦截效果,访问proxy就等同于访问target。
Proxy 实例也可以作为其他对象的原型对象。
var proxy = new Proxy({}, {
get: function(target, property) {
return 35;
}
});
let obj = Object.create(proxy); //将proxy 设到 obj的原型上
obj.time // 35
上面代码中,proxy对象是obj对象的原型,obj对象本身并没有time属性,所以根据原型链,会在 原型中的 proxy对象上读取该属性,导致被拦截。
同时上面代码也用到了Object.create()
的操作,下面简单举个例子,了解一下
Object.create(obj,propertiesObject)
obj: 创建对象的原型,表示要继承的对象
propertiesObject(可选 ):也是一个对象,用于对新创建的对象进行初始化。注意:此属性直接添加在对象中,不会在原形上。是一个描述对象。例如 { p:{ value: 30 } }
var Obj = {
name:'mini',
age:3,
show:function () {
console.log(this.name +" is " +this.age);
}
}
//MyObj 继承obj, prototype指向Obj
var MyObj = Object.create(Obj,{
like:{ // 创建属性名为like 的描述对象
value:"fish", // 初始化赋值
writable:true, // 是否是可改写的
configurable:true, // 是否能够删除,是否能够被修改
enumerable:true //是否可以用for in 进行枚举
},
})
console.log(MyObj)
输出结果:
同一个拦截器函数,可以设置拦截多个操作。
var handler = {
get: function(target, name) { //get操作拦截对象属性的读取
if (name === 'prototype') {
return Object.prototype;
}
return 'Hello, ' + name;
},
apply: function(target, thisBinding, args) { //apply拦截 Proxy 实例作为函数调用的操作
return args[0];
},
construct: function(target, args) { //construct拦截 Proxy 实例作为构造函数调用的操作
return {value: args[1]};
}
};
var fproxy = new Proxy(function(x, y) {
return x + y;
}, handler);
fproxy(1, 2) // 1 执行get拦截操作
new fproxy(1, 2) // {value: 2} 执行construct拦截操作
fproxy.prototype === Object.prototype // true
fproxy.foo === "Hello, foo" // true 执行get拦截操作
对于可以设置、但没有设置拦截的操作,则直接落在目标对象上,按照原先的方式产生结果。
2.Proxy中拦截方法总览
get(target, propKey, receiver)
:拦截对象属性的读取,比如 proxy.foo 和 proxy[‘foo’]。set(target, propKey, value, receiver)
:拦截对象属性的设置,比如proxy.foo = v或proxy[‘foo’] = v,返回一个布尔值。has(target, propKey)
:拦截propKey in proxy的操作,返回一个布尔值。deleteProperty(target, propKey)
:拦截delete proxy[propKey]的操作,返回一个布尔值。ownKeys(target)
:拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for…in循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。getOwnPropertyDescriptor(target, propKey)
:拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。defineProperty(target, propKey, propDesc)
:拦截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一个布尔值。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 实例作为函数调用的操作,比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)。construct(target, args)
:拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(…args)。
方法详细说明介绍可以点击proxy方法总览
3.Proxy.revocable()
Proxy.revocable
方法返回一个可取消的 Proxy 实例。
let target = {};
let handler = {};
let {proxy, revoke} = Proxy.revocable(target, handler);
proxy.foo = 123;
proxy.foo // 123
revoke();
proxy.foo // TypeError: Revoked
上面代码中,当执行revoke函数之后,再访问Proxy实例,就会抛出一个错误。
- Proxy.revocable方法返回一个对象
- 该对象的proxy属性是Proxy实例,revoke属性是一个函数,可以取消Proxy实例。
- Proxy.revocable的一个使用场景是,目标对象不允许直接访问,必须通过代理访问,一旦访问结束,就收回代理权,不允许再次访问。
4.this 问题
虽然 Proxy有目标函数,但是它不是透明的,导致 this 也可以指向它。
此外,有些原生对象的内部属性,只有通过正确的this才能拿到,所以 Proxy 也无法代理这些原生对象的属性。
const target = new Date();
const handler = {};
const proxy = new Proxy(target, handler);
proxy.getDate();
// TypeError: this is not a Date object.
上面代码中,getDate方法只能在Date对象实例上面拿到,如果this不是Date对象实例就会报错。这时,this绑定原始对象,就可以解决这个问题。
const target = new Date('2015-01-01');
const handler = {
get(target, prop) {
if (prop === 'getDate') {
return target.getDate.bind(target);
}
return Reflect.get(target, prop);
}
};
const proxy = new Proxy(target, handler);
proxy.getDate() // 1
5.总结
- Proxy 用于修改某些操作的默认行为,可以重载对象的各个操作,使用自己定义的方式运行。
- 两个参数(target, handler),target为目标参数(对象),handler为一个对象,里面可以设置拦截操作并使用自己定义的方法。
- 如果handler没有设置任何拦截,那就等同于直接通向原对象。