Proxy
拦截函数
get
- target 代理的对象
- propkeyName 读取的属性名称
- receiver Proxy 对象本身
如果一个属性不可配置（configurable）且不可写（writable），则 Proxy 不能修改该属性，否则通过 Proxy 对象访问该属性会报错。
var proxy = new Proxy({a:1},{
get:function(target,propkeyname,resiver){
return {target,propkeyname,resiver}
}
})
console.log(proxy.a)
/**
* {
* target:{a:1},
* propkeyName:"a",
* resiver: Proxy({a:1}) // 这指的就是 proxy 这个对象
* }
*/
dom 生成器
var dom = new Proxy(
{},
{
get: function (target, elementType,receiver) {
return function (attrs, ...children) {
const ele = document.createElement(elementType);
for (let attr of Object.keys(attrs)) {
ele.setAttribute(attr, attrs[attr]);
}
for (let child of children) {
if (typeof child === "string") {
child = document.createTextNode(child);
}
ele.append(child);
}
return ele;
};
},
}
);
var ele = dom.div(
{},
"Hello,world!",
dom.a({ href: "www.baidu.com" }, "百度")
);
console.log(ele);
// <div><a href="www.baidu.com">百度</a></div>
set
- target 代理的对象
- propkeyName 设置属性的名称
- propkeyValue 设置属性的值
- receiver Proxy 对象本身
严格模式下：需要返回 true ,返回 false 或不返回会报错
Object.defineProperty 不会触发这个调用
如果一个属性不可配置（configurable）且不可写（writable），则 Proxy 不能修改该属性，否则通过 Proxy 对象不起作用。
var handler = {
set(target,propkeyName,propValue){
console.log("-------> set");
console.log("target",target);
console.log("propkeyName",propkeyName);
console.log("propValue",propValue);
target[propkeyName] = propValue;
console.log("<------- set");
},
};
var target = {a:1};
var proxy = new Proxy(target, handler);
proxy.foo = 'bar'
Object.defineProperty(proxy,'foo2',{ value: "bar2", writable: true, enumerable: true, configurable: true })
console.log(proxy);
apply
- target 代理的对象
- ctx 函数上下文中的 this 指针
- args 函数接收的参数
若代理对象是一个函数，那么可以拦截执行调用
拦截调用
var twice = {
apply (target, ctx, args) {
return Reflect.apply(...arguments) * 2;
}
};
function sum (left, right) {
return left + right;
};
var proxy = new Proxy(sum, twice);
proxy(1, 2) // 6
proxy.call(null, 5, 6) // 22
proxy.apply(null, [7, 8]) // 30
// 使用 Reflect 调用也会被拦截
Reflect.apply(proxy, null, [9, 10]) // 38
has
- target 代理的对象
- propkeyName 查询属性的名称
如果原对象不可配置或者禁止扩展，这时 has()拦截会报错。
不检查属性来自自身还是原型，只对 in 关键字生效，且对 for_in 无效
var obj = { a: 10 };
Object.preventExtensions(obj);
var p = new Proxy(obj, {
has: function(target, prop) {
return false;
}
});
'a' in p // TypeError is thrown
constructor
- target 代理的函数
- args 构造函数参数
- newTarget Proxy 对象
构造函数拦截器必须返回一个对象
construct()方法中的 this 指向的是 handler，而不是实例对象。
const handler = {
construct: function(target, args) {
console.log(this === handler);
return new target(...args);
}
}
let p = new Proxy(function () {}, handler);
new p() // true
deleteProperty
- target 代理对象
- propkeyName 属性名称
需要在该函数中将代理对象中对应值删除。需要返回 true 表示删除成功，false/报错表示删除失败
目标对象自身的不可配置（configurable）的属性，不能被 deleteProperty 方法删除，否则报错。
const handle = {
deleteProperty:function(target,keyName){
console.log("target",target);
console.log("keyName",keyName);
delete target[keyName];
return true
}
}
const proxy = new Proxy({a:1},handle);
delete proxy.a;
console.log(proxy);
defineProperty
- target 代理对象
- propkeyName 属性值名称
- descriptor 属性描述
当 set 与 defineProperty 同时存在的时候，直接赋值只会调用 set，但如果不存在 set 或者通过 Object.defineProperty 还是会被调用
返回值为 true,表示成功，如果无返回值会报错
var handler = {
set(target,propkeyName,propValue){
console.log("-------> set");
console.log("target",target);
console.log("propkeyName",propkeyName);
console.log("propValue",propValue);
target[propkeyName] = propValue;
console.log("<------- set");
},
defineProperty (target, key, descriptor) {
console.log("-------> defineProperty");
console.log("target",target);
console.log("key",key);
console.log("descriptor",descriptor);
console.log("<------- defineProperty");
Object.defineProperty(target,key,descriptor);
return true;
}
};
var target = {a:1};
var proxy = new Proxy(target, handler);
proxy.foo = 'bar'
Object.defineProperty(proxy,'b',{ value: "bar", writable: true, enumerable: true, configurable: true })
console.log(proxy);
getOwnPropertyDescriptor
- target 代理对象
- propkeyName 属性值名称
必须返回一个属性描述对象或者 undefinde，否则会报错
var handler = {
getOwnPropertyDescriptor (target, key) {
if (key[0] === '_') {
return;
}
return Object.getOwnPropertyDescriptor(target, key);
}
};
var target = { _foo: 'bar', baz: 'tar' };
var proxy = new Proxy(target, handler);
Object.getOwnPropertyDescriptor(proxy, 'wat')
// undefined
Object.getOwnPropertyDescriptor(proxy, '_foo')
// undefined
Object.getOwnPropertyDescriptor(proxy, 'baz')
// { value: 'tar', writable: true, enumerable: true, configurable: true }
getPrototypeOf()
- Object.prototype.__proto__
- Object.prototype.isPrototypeOf()
- Object.getPrototypeOf()
- Reflect.getPrototypeOf()
- instanceof
拦截以上方法,返回值必须是对象或是 null，否则会报错。
另外，如果目标对象不可扩展（non-extensible）， getPrototypeOf()方法必须返回目标对象的原型对象。
var proto = {};
var p = new Proxy({a:1}, {
getPrototypeOf(target) {
return proto;
}
});
Object.getPrototypeOf(p) === proto // true
isExtensible
拦截 Object.isExtensible()操作。该函数必须返回布尔值，其他值会被自动转换。
且返回值必须与目标对象的 isExtensible 属性保持一致，否则就会抛出错误
var target = {};
object.preventExtensions(target);
console.log(Object.isExtensions(target)); // false
var p = new Proxy(target, {
isExtensible: function(target) {
console.log("called");
return true;
}
});
Object.isExtensible(p) // 与 target.isExtensions 值不一致 会报错
ownKeys
方法返回的数组成员，只能是字符串或 Symbol 值。如果有其他类型的值，或者返回的根本不是数组，就会报错。
如果目标对象自身包含不可配置的属性(configurable)，则该属性必须被 ownKeys()方法返回，否则报错。
如果目标对象是不可扩展的（non-extensible），这时 ownKeys()方法返回的数组之中，必须包含原对象的所有属性，且不能包含多余的属性，否则报错。
拦截以下调用
-
Object.getOwnPropertyNames()
- 会自动过滤 属性名为 Symbol 的属性，即使拦截函数中返回
-
Object.getOwnPropertySymbols()
- 会自动过滤 非属性名为 Symbol 的属性，即使拦截函数中返回
-
Object.keys()
- 会自动过滤 不存在、不可遍历、属性名为 Symbol 的属性，即使拦截函数中返回
-
for...in 循环
- 会自动过滤 不存在、不可遍历、属性名为 Symbol 的属性，即使拦截函数中返回
let target = {
a: 1,
b: 2,
c: 3,
[Symbol.for('secret')]: '4',
};
Object.defineProperty(target, 'key', {
enumerable: false,
configurable: true,
writable: true,
value: 'static'
});
let handler = {
ownKeys(target) {
return ['a', 'd', Symbol.for('secret'), 'key'];
}
};
let proxy = new Proxy(target, handler);
console.log( Object.keys(proxy));
// Array ["a"]
console.log( Object.getOwnPropertyNames(proxy));
// Array ["a", "d", "key"]
console.log( Object.getOwnPropertySymbols(proxy));
// Array ["a", "d", "key"]
for(let key in proxy){
console.log(key);
}
// “a”
preventExtensions
preventExtensions()方法拦截 Object.preventExtensions()。该方法必须返回一个布尔值，否则会被自动转为布尔值。
只有目标对象不可扩展时（即 Object.isExtensible(proxy)为 false），proxy.preventExtensions 才能返回 true，否则会报错。
为解决这个问题，可以在拦截函数中，将目标对象禁止掉扩展
var target = {};
var proxy = new Proxy(target, {
preventExtensions: function(target) {
return true;
}
});
Object.preventExtensions(proxy)
// Uncaught TypeError: 'preventExtensions' on proxy: trap returned truish but the proxy target is extensible
// proxy 的拦截 与 Object.isExtensions(proxy)[值为 false] 不一致 会报错
setPrototypeOf
setPrototypeOf()方法主要用来拦截 Object.setPrototypeOf()方法。
该方法只能返回布尔值，否则会被自动转为布尔值。另外，如果目标对象不可扩展（non-extensible），setPrototypeOf()方法不得改变目标对象的原型。
var handler = {
setPrototypeOf (target, proto) {
throw new Error('Changing the prototype is forbidden');
}
};
var proto = {};
var target = function () {}; // 函数或对象都是可以的
var proxy = new Proxy(target, handler);
Object.setPrototypeOf(proxy, proto);
// Error: Changing the prototype is forbidden
Proxy.revocable
返回一个可取消的 Proxy 实例
Proxy.revocable()方法返回一个对象，该对象的 proxy 属性是 Proxy 实例，revoke 属性是一个函数，可以取消 Proxy 实例。上面代码中，当执行 revoke 函数之后，再访问 Proxy 实例，就会抛出一个错误。
Proxy.revocable()的一个使用场景是，目标对象不允许直接访问，必须通过代理访问，一旦访问结束，就收回代理权，不允许再次访问。
let target = {};
let handler = {};
let {proxy, revoke} = Proxy.revocable(target, handler);
proxy.foo = 123;
proxy.foo // 123
revoke();
proxy.foo // TypeError: Revoked
this 问题
在 Proxy 代理的情况下，目标对象内部的 this 关键字会指向 Proxy 代理，也就是 handle。
const target = {
m: function () {
console.log(this === proxy);
}
};
const handler = {};
const proxy = new Proxy(target, handler);
target.m() // false
proxy.m() // true
