ES6知识点整理之----Proxy----API
2021-07-10 23:08
标签：ons 可扩展 rabl bar 作用 arguments == ber 继承 用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。 get方法第三个参数：指向原始的读操所在的那个对象，即Prosy实例 如果一个属性不可配置（configurable）且不可写（writable），则 Proxy 不能修改该属性，否则通过 Proxy 对象访问该属性会报错。 用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。 利用 拦截函数的调用、 用来拦截 如果原对象不可配置或者禁止扩展，这时 值得注意的是， 用于拦截 用于拦截 注意，目标对象自身的不可配置（configurable）的属性，不能被 拦截了 注意，如果目标对象不可扩展（extensible），则 拦截 用来拦截获取对象原型。具体来说，拦截下面这些操作。 注意， 拦截 注意，该方法只能返回布尔值，否则返回值会被自动转为布尔值。 这个方法有一个强限制，它的返回值必须与目标对象的 用来拦截对象自身属性的读取操作。具体来说，拦截以下操作。 注意，使用 如果目标对象自身包含不可配置的属性，则该属性必须被 如果目标对象是不可扩展的（non-extensition），这时 拦截 这个方法有一个限制，只有目标对象不可扩展时（即 为了防止出现这个问题，通常要在 主要用来拦截 注意，该方法只能返回布尔值，否则会被自动转为布尔值。另外，如果目标对象不可扩展（extensible）， 返回一个可取消的 Proxy 实例。 ES6知识点整理之----Proxy----API 标签：ons 可扩展 rabl bar 作用 arguments == ber 继承 原文地址：https://www.cnblogs.com/adhehe/p/9673934.htmlget()
var person = {
name: "张三"
};
var proxy = new Proxy(person, {
get: function(target, property) {
if (property in target) {
return target[property];
} else {
throw new ReferenceError("Property \"" + property + "\" does not exist.");
}
}
});
proxy.name // "张三"
proxy.age // 抛出一个错误
get方法可以继承：let proto = new Proxy({}, {
get(target, propertyKey, receiver) {
console.log(‘GET ‘ + propertyKey);
return target[propertyKey];
}
});
let obj = Object.create(proto);
obj.foo // "GET foo"
const proxy = new Proxy({}, {
get: function(target, property, receiver) {
return receiver;
}
});
proxy.getReceiver === proxy // true
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 failed
set()
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方法，还可以数据绑定，即每当对象发生变化时，会自动更新 DOM。set方法第四个参数的例子：const handler = {
set: function(obj, prop, value, receiver) {
obj[prop] = receiver;
}
};
const proxy = new Proxy({}, handler);
proxy.foo = ‘bar‘;
proxy.foo === proxy // true
注意，如果目标对象自身的某个属性，不可写且不可配置，那么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"
apply()
call和apply操作。可以接受三个参数，分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组。var handler = {
apply (target, ctx, args) {
return Reflect.apply(...arguments);
}
};
var target = function () { return ‘I am the target‘; };
var handler = {
apply: function () {
return ‘I am the proxy‘;
}
};
var p = new Proxy(target, handler);
p()
// "I am the proxy"
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.apply方法，也会被拦截。
Reflect.apply(proxy, null, [9, 10]) // 38
has()
HasProperty操作，即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是in运算符。可以接受两个参数，分别是目标对象、需查询的属性名。var handler = {
has (target, key) {
if (key[0] === ‘_‘) {
return false;
}
return key in target;
}
};
var target = { _prop: ‘foo‘, prop: ‘foo‘ };
var proxy = new Proxy(target, handler);
‘_prop‘ in proxy // false
has拦截会报错。var obj = { a: 10 };
Object.preventExtensions(obj);
var p = new Proxy(obj, {
has: function(target, prop) {
return false;
}
});
‘a‘ in p // TypeError is thrown
has方法拦截的是HasProperty操作，而不是HasOwnProperty操作，即has方法不判断一个属性是对象自身的属性，还是继承的属性。has拦截对for...in循环不生效。construct()
new命令。construct方法可以接受两个参数。
target：目标对象args：构造函数的参数对象newTarget：创造实例对象时，new命令作用的构造函数（下面例子的p）var handler = {
construct (target, args, newTarget) {
return new target(...args);
}
};
var p = new Proxy(function () {}, {
construct: function(target, args) {
console.log(‘called: ‘ + args.join(‘, ‘));
return { value: args[0] * 10 };
}
});
(new p(1)).value
// "called: 1"
// 10
construct方法返回的必须是一个对象，否则会报错。deleteProperty()
delete操作，如果这个方法抛出错误或者返回false，当前属性就无法被delete命令删除。var handler = {
deleteProperty (target, key) {
invariant(key, ‘delete‘);
delete target[key];
return true;
}
};
function invariant (key, action) {
if (key[0] === ‘_‘) {
throw new Error(`Invalid attempt to ${action} private "${key}" property`);
}
}
var target = { _prop: ‘foo‘ };
var proxy = new Proxy(target, handler);
delete proxy._prop
// Error: Invalid attempt to delete private "_prop" property
deleteProperty方法删除，否则报错。defineProperty()
Object.defineProperty操作。var handler = {
defineProperty (target, key, descriptor) {
return false;
}
};
var target = {};
var proxy = new Proxy(target, handler);
proxy.foo = ‘bar‘ // 不会生效
defineProperty不能增加目标对象上不存在的属性，否则会报错。另外，如果目标对象的某个属性不可写（writable）或不可配置（configurable），则defineProperty方法不得改变这两个设置。getOwnPropertyDescriptor()
Object.getOwnPropertyDescriptor()，返回一个属性描述对象或者undefined。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()instanceofvar proto = {};
var p = new Proxy({}, {
getPrototypeOf(target) {
return proto;
}
});
Object.getPrototypeOf(p) === proto // true
getPrototypeOf方法的返回值必须是对象或者null，否则报错。另外，如果目标对象不可扩展（extensible）， getPrototypeOf方法必须返回目标对象的原型对象。isExtensible()
Object.isExtensible操作。var p = new Proxy({}, {
isExtensible: function(target) {
console.log("called");
return true;
}
});
Object.isExtensible(p)
// "called"
// true
isExtensible属性保持一致，否则就会抛出错误。Object.isExtensible(proxy) === Object.isExtensible(target)
ownKeys()
Object.getOwnPropertyNames()Object.getOwnPropertySymbols()Object.keys()for...in循环let target = {
a: 1,
b: 2,
c: 3
};
let handler = {
ownKeys(target) {
return [‘a‘];
}
};
let proxy = new Proxy(target, handler);
Object.keys(proxy)
// [ ‘a‘ ]
Object.keys方法时，有三类属性会被ownKeys方法自动过滤，不会返回。
enumerable）的属性ownKeys方法返回的数组成员，只能是字符串或 Symbol 值。如果有其他类型的值，或者返回的根本不是数组，就会报错。ownKeys方法返回，否则报错。ownKeys方法返回的数组之中，必须包含原对象的所有属性，且不能包含多余的属性，否则报错。preventExtensions()
Object.preventExtensions()。该方法必须返回一个布尔值，否则会被自动转为布尔值。Object.isExtensible(proxy)为false），proxy.preventExtensions才能返回true，否则会报错。var p = new Proxy({}, {
preventExtensions: function(target) {
return true;
}
});
Object.preventExtensions(p) // 报错
proxy.preventExtensions方法里面，调用一次Object.preventExtensions。var p = new Proxy({}, {
preventExtensions: function(target) {
console.log(‘called‘);
Object.preventExtensions(target);
return true;
}
});
Object.preventExtensions(p)
// "called"
// true
setPrototypeOf()
Object.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
setPrototypeOf方法不得改变目标对象的原型。Proxy.revocable()
let target = {};
let handler = {};
let {proxy, revoke} = Proxy.revocable(target, handler);
proxy.foo = 123;
proxy.foo // 123
revoke();
proxy.foo // TypeError: Revoked
Proxy.revocable的一个使用场景是，目标对象不允许直接访问，必须通过代理访问，一旦访问结束，就收回代理权，不允许再次访问。