1、Proxy是什么?
答:用来修改默写默认操作的行为,在语言层面上修改,是属于一种‘元编程’,即对编程语言进行编程。 Proxy可以理解成在目标对象前架设了一个‘拦截层’。外界想要访问这个对象,需要经过这层拦截, 因此proxy也被称为‘拦截器’。例如,在获取或添加某个对象的属性前进行拦截
var obj = new Proxy({b: 2}, {
get: function(target, key, receiver){
console.log('您正在访问对象的属性')
return Reflect.get(target, key, receiver)
},
set: function(target, key, value, receiver){
console.log('您正在为对象增加属性并赋值');
return Reflect.set(target, key, value, receiver)
}
})
obj.a = 111
obj.a
2、Proxy构造函数
答:ES6原生提供了Proxy构造函数,可以通过new关键字生成Proxy实例:new Proxy(target, handler); target是所要拦截的目标对象 handler是拦截函数(行为); 如果handler没有设置任何的拦截,那么等同于直接通向原来的对象。
let target = {}, handler = {}
var p = new Proxy(target, handler)
p.a = 1;
target.a
3、怎么实现对对象默认操作的拦截
答:有两种方式。一种是直接将Proxy对象实例设置到其他对象proxy属性上,这样可以在对象上进行调用 二是将Proxy实例作为其他对象的原型对象。
var obj = {
proxy: new Proxy(target, handler)
}
var proxy = new Proxy({}, {
get: function(target, key, receiver){
return 111
}
})
var obj = Object.create(proxy)
obj.aa
4、Proxy实例上的拦截函数handler有多少种拦截行为呢
答:13种。 get(target, prop, receiver)-----------------拦截对象属性的读取 set(target, prop, value, receiver)---------拦截对象属性的获取,返回布尔值 has(target, prop)---------拦截 key in obj 操作,返回布尔值 deleteProperty(target, prop)---------------拦截 delete obj[key] 操作,返回布尔值 ownKeys(target)–拦截 Object.getOwnPropertyNames(obj)、Object.getOwnPropertySymbols(obj)、Object.keys()、for…in,返回一个数组 getOwnPropertyDescriptor(target, prop)-----拦截Object.getOwnPropertyDescriptor(obj, prop),返回描述对象 defineProperty(target, prop, propDecription) --拦截 Object.defineProperty(obj, prop, propDecription)、Object.defineProperties(obj, propDecription),返回一个布尔值。 getPrototypeOf(obj)—拦截 Object.getPrototypeOf(obj),返回一个对象 setPrototypeOf(target, prototype)—拦截Object.setPrototypeOf(obj, prototype),返回一个布尔值 apply(target, object, args)—拦截Proxy实例作为函数调用的操作。比如 proxy()、proxy.call(obj, …args)、proxy.apply(obj, null, arrArgs) preventExtensions(target)—拦截Object.preventExtensions(obj),返回一个布尔值 isExtensible(target)–拦截Object.isExtensible(obj),返回一个布尔值 construct(target, args) —拦截Proxy实例作为构造函数调用的操作,比如 new proxy(…args)
5、Proxy实例的get(target, prop,receiver)方法
答:get()用来拦截对象的属性读取操作。 如果一个属性是不可配置(configurable)或不可写(writable)那么这个属性就不能被代理,Proxy对象访问该属性也会报错。 get()方法可以接受3个参数,依次为目标对象、属性名和 Proxy 实例本身,其中最后一个参数可选。
var person = { name: "张三"};
var proxy = new Proxy(person, {
get: function(target, propKey) {
if (propKey in target) {
return target[propKey];
} else {
throw new ReferenceError("Prop name \"" + propKey + "\" does not exist.");
}
}
});
proxy.name
proxy.age
let proto = new Proxy({}, {
get(target, propertyKey, receiver) {
console.log('GET ' + propertyKey);
return target[propertyKey];
}
});
let obj = Object.create(proto);
obj.foo
6、Proxy实例的set(target, prop, value, receiver)方法
答:用来拦截对象的属性赋值操作 如果一个属性是不可配置(configurable)或不可写(writable)那么这个属性就不能被代理,Proxy对象访问该属性也会报错。 get()方法可以接受四个参数,依次为目标对象、属性名、属性值和 Proxy 实例本身,其中最后一个参数可选。 严格模式下,set代理返回false或者undefined,都会报错。
const handler = {
get (target, key) {
invariant(key, 'get');
return target[key];
},
set (target, key, value) {
invariant(key, 'set');
target[key] = value;
return true;
}
};
function invariant (key, action) {
if (key[0] === '_') {
throw new Error(`Invalid attempt to ${action} private "${key}" property`);
}
}
const target = {};
const proxy = new Proxy(target, handler);
proxy._prop
proxy._prop = 'c'
const handler = {
set: function(obj, prop, value, receiver) {
obj[prop] = receiver;
return true;
}
};
const proxy = new Proxy({}, handler);
proxy.foo = 'bar';
proxy.foo === proxy
'use strict';
const handler = {
set: function(obj, prop, value, receiver) {
obj[prop] = receiver;
return false;
}
};
const proxy = new Proxy({}, handler);
proxy.foo = 'bar';
7、Proxy实例的apply(target, ctx, arguments)方法
答:apply方法是用来拦截函数的调用、call和apply操作。 apply方法可以接受三个参数,分别是目标对象、目标对象的上下文对象(this)和目标对象的参数数组。
var target = function () { return 'I am the target'; };
var handler = {
apply: function () {
return 'I am the proxy';
}
};
var p = new Proxy(target, handler);
p()
8、Proxy实例的has(target, prop) 方法
答:该方法用来拦截hasProperty操作,判断对象是否存在某个属性,最典型的操作就是对象的in操作。 如果一个属性是不可配置(configurable)或禁止扩展,那么使用has方法就会报错; 这个拦截操作对 for…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
9、Proxy实例的construct(target, arguments, newTarget)方法
答:该方法用来拦截 new命令,可以接受三个参数,分别是目标对象、构造函数的参数数组、创造实例对象时,new命令作用的构造函数 该方法必须返回一个对象,否则会报错 construct()拦截的是构造函数,所以它的目标对象必须是函数,否则就会报错。 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()
10、Proxy实例的deleteProperty(target, prop)方法
答:deleteProperty方法用于拦截delete操作,如果这个方法抛出错误或者返回false,当前属性就无法被delete命令删除。 如果目标对象自身的不可配置(configurable)的属性,不能被deleteProperty方法删除,否则报错。
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
11、Proxy实例的defineProperty(target, prop, propDescription)方法
答: defineProperty()方法拦截了Object.defineProperty()操作。 如果目标对象不可扩展(non-extensible),则defineProperty()不能增加目标对象上不存在的属性,否则会报错。 另外,如果目标对象的属性不可写(writable)或不可配置(configurable),则defineProperty()方法不得改变这两个设置。 如果该方法只返回false,会导致添加新属性总是无效。但这里的false只是用来提示操作失败,本身并不能阻止添加新属性。
var handler = {
defineProperty (target, key, descriptor) {
return false;
}
};
var target = {};
var proxy = new Proxy(target, handler);
proxy.foo = 'bar'
12、Proxy实例的getOwnPropertyDescriptor(target, prop)方法
答:该方法用来拦截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')
Object.getOwnPropertyDescriptor(proxy, '_foo')
Object.getOwnPropertyDescriptor(proxy, 'baz')
13、Proxy实例的getPrototypeOf(target)方法
答:该方法主要用来拦截获取对象原型,涉及的操作有: Object.prototype.proto 、Object.prototype.isPrototypeOf() Object.getPrototypeOf() 、Reflect.getPrototypeOf() 、instanceof getPrototypeOf()方法的返回值必须是对象或者null,否则报错。 如果目标对象不可扩展(non-extensible), getPrototypeOf()方法必须返回目标对象的原型对象。
var proto = {};
var p = new Proxy({}, {
getPrototypeOf(target) {
return proto;
}
});
Object.getPrototypeOf(p) === proto
14、Proxy实例的isExtensible(target)方法
答:isExtensible()方法拦截Object.isExtensible()操作。 该方法只能返回布尔值,否则返回值会被自动转为布尔值。 这个方法有一个强限制,它的返回值必须与目标对象的isExtensible属性保持一致,否则就会抛出错误。
var p = new Proxy({}, {
isExtensible: function(target) {
return false;
}
});
Object.isExtensible(p)
15、Proxy实例的ownKeys(target)方法
答:ownKeys()方法用来拦截对象自身属性的读取操作。 拦截的操作有Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()、Object.keys()、for…in循环; 如果目标对象自身包含不可配置的属性,则该属性必须被ownKeys()方法返回,否则报错。 如果目标对象是不可扩展的(non-extensible),这时ownKeys()方法返回的数组之中,必须包含原对象的所有属性,且不能包含多余的属性,否则报错。 使用Object.keys()方法时,ownKeys()会过滤目标对象上不存在的属性、Symbol类型的属性、不可遍历的属性(key)都会被自动过滤掉,不会返回。 ownKeys()方法返回的数组成员,只能是字符串或 Symbol 值。如果有其他类型的值,或者返回的根本不是数组,就会报错。
var obj = {};
var p = new Proxy(obj, {
ownKeys: function(target) {
return [123, true, undefined, null, {}, []];
}
});
Object.getOwnPropertyNames(p)
16、Proxy实例的preventExtensions(target)方法
答:该方法用来拦截 Object.preventExtensions()。 该方法返回一个布尔值,如果不是布尔值,会进行转换成布尔值。 当目标对象不可扩展时(即Object.isExtensible(proxy)为false),该方法才能返回true,不然会报错。
var proxy = new Proxy({}, {
preventExtensions: function(target) {
console.log('called');
Object.preventExtensions(target);
return true;
}
});
Object.preventExtensions(proxy)
17、Proxy实例的setPrototype(target, proto)方法
答:该方法用来拦截 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);
18、Proxy.revocable(target,handler)方法
答:该方法返回一个可取消的Proxy实例。 运用场景是:当需求是只能通过代理进行访问,目标对象不可以进行直接访问, 访问结束就收回代理权且不允许再次访问,可以使用该方法。
let target = {};
let handler = {};
let {proxy, revoke} = Proxy.revocable(target, handler);
proxy.foo = 123;
proxy.foo
revoke();
proxy.foo
19、利用Proxy代理时,目标对象中的this会指向什么
答:会指向Proxy代理实例
const target = {
m: function () {
console.log(this === proxy);
}
};
const handler = {};
const proxy = new Proxy(target, handler);
target.m()
proxy.m()
20、目标对象的构造函数中的this会指向目标对象的Proxy代理吗?
答:不会
const _name = new WeakMap();
class Person {
constructor(name) {
_name.set(this, name);
}
get name() {
return _name.get(this);
}
}
const jane = new Person('Jane');
jane.name
const proxy = new Proxy(jane, {});
proxy.name
21、Proxy 拦截函数内部的this指向哪里
答:指向handler对象
const handler = {
get: function (target, key, receiver) {
console.log(this === handler);
return 'Hello, ' + key;
},
set: function (target, key, value) {
console.log(this === handler);
target[key] = value;
return true;
}
};
const proxy = new Proxy({}, handler);
proxy.foo
proxy.foo = 1
22、所有原生对象中的内部属性能被Proxy代理吗
答:不能,例如:
const target = new Date();
const handler = {};
const proxy = new Proxy(target, handler);
proxy.getDate();
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()
23、Proxy代理的应用有哪些
答:可用于编写Web服务器的客户端 可用于实现数据库的ORM层
|