关于Proxy

最新推荐文章于 2023-04-06 09:30:00 发布
最新推荐文章于 2023-04-06 09:30:00 发布
阅读量226 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/celi_echo/article/details/100061598
版权

一、proxy的拦截操作

精简版https://blog.csdn.net/qq_30100043/article/details/53442921
1 get()
get方法用于拦截某个属性的读取操作。 上文已经有一个例子， 下面是另一个拦截读取操作的例子。

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 //  抛出一个错误
上面代码表示， 如果访问目标对象不存在的属性， 会抛出一个错误。 如果没有这个拦截函数， 访问不存在的属性， 只会返回undefined。
get方法可以继承。 

let proto = new Proxy({}, {

get(target, propertyKey, receiver) {

console.log('GET ’ + propertyKey);

return target[propertyKey];

}

});

let obj = Object.create(proto);

obj.xxx // “GET xxx"
上面代码中， 拦截操作定义在 Prototype 对象上面， 所以如果读取obj对象继承的属性时， 拦截会生效。
下面的例子使用get拦截， 实现数组读取负数的索引。 

function createArray(…elements) {

let handler = {

get(target, propKey, receiver) {

let index = Number(propKey);

if(index < 0) {

propKey = String(target.length + index);

}

return Reflect.get(target, propKey, receiver);

}

};

let target = [];

target.push(…elements);

return new Proxy(target, handler);

}

let arr = createArray(‘a’, ‘b’, ‘c’);

arr[-1] // c
上面代码中， 数组的位置参数是 - 1， 就会输出数组的倒数最后一个成员。
利用 Proxy， 可以将读取属性的操作（ get）， 转变为执行某个函数， 从而实现属性的链式操作。 

var pipe = (function() {

return function(value) {

var funcStack = [];

var oproxy = new Proxy({}, {

get: function(pipeObject, fnName) {

if(fnName === ‘get’) {

return funcStack.reduce(function(val, fn) {

return fn(val);

}, value);

}

funcStack.push(window[fnName]);

return oproxy;

}

});

return oproxy;

}

}());

var double = n => n * 2;

var pow = n => n * n;

var reverseInt = n => n.toString().split(”").reverse().join("") | 0;

pipe(3).double.pow.reverseInt.get; // 63
上面代码设置 Proxy 以后， 达到了将函数名链式使用的效果。
下面的例子则是利用get拦截， 实现一个生成各种 DOM 节点的通用函数dom。 

const dom = new Proxy({}, {

get(target, property) {

return function(attrs = {}, …children) {

const el = document.createElement(property);

for(let prop of Object.keys(attrs)) {

el.setAttribute(prop, attrs[prop]);

}

for(let child of children) {

if(typeof child === ‘string’) {

child = document.createTextNode(child);

}

el.appendChild(child);

}

return el;

}

}

});

const el = dom.div({},

'Hello, my name is ',

dom.a({

href: ‘//example.com’

}, ‘Mark’),

‘. I like:’,

dom.ul({},

dom.li({}, ‘The web’),

dom.li({}, ‘Food’),

dom.li({}, ‘…actually that’s it’)

)

);

document.body.appendChild(el);


2 set()
set方法用来拦截某个属性的赋值操作。
假定Person对象有一个age属性， 该属性应该是一个不大于 200 的整数， 那么可以使用Proxy保证age的属性值符合要求。 

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， 任何不符合要求的age属性赋值， 都会抛出一个错误。 利用set方法， 还可以数据绑定， 即每当对象发生变化时， 会自动更新 DOM。
有时， 我们会在对象上面设置内部属性， 属性名的第一个字符使用下划线开头， 表示这些属性不应该被外部使用。 结合get和set方法， 就可以做到防止这些内部属性被外部读写。 

var handler = {

get(target, key) {

invariant(key, ‘get’);

return target[key];

},

set(target, key, value) {

invariant(key, ‘set’);

return true;

}

};

function invariant(key, action) {

if(key[0] === ‘_’) {

throw new Error(Invalid attempt to ${action} private "${key}" property);

}

}

var target = {};

var proxy = new Proxy(target, handler);

proxy._prop

// Error: Invalid attempt to get private “_prop” property

proxy._prop = ‘c’

// Error: Invalid attempt to set private “_prop” property

// Error: Invalid attempt to set private “_prop” property
上面代码中， 只要读写的属性名的第一个字符是下划线， 一律抛错， 从而达到禁止读写内部属性的目的。
3 apply()

apply方法拦截函数的调用、 call 和 apply 操作。

var handler = {
	apply(target, ctx, args) {
		return Reflect.apply(...arguments);
	}
};
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()
	// "I am the proxy"
上面代码中， 变量p是 Proxy 的实例， 当它作为函数调用时（ p()）， 就会被apply方法拦截， 返回一个字符串。
下面是另外一个例子。 

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上面代码中， 每当执行proxy函数（ 直接调用或call和apply调用）， 就会被apply方法拦截。
另外， 直接调用Reflect.apply方法， 也会被拦截。

Reflect.apply(proxy, null, [9, 10]) // 38

4 has()
has方法用来拦截HasProperty操作， 即判断对象是否具有某个属性时， 这个方法会生效。 典型的操作就是in运算符。
下面的例子使用has方法隐藏某些属性， 不被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
上面代码中， 如果原对象的属性名的第一个字符是下划线， proxy.has就会返回false， 从而不会被in运算符发现。
如果原对象不可配置或者禁止扩展， 这时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
上面代码中， obj对象禁止扩展， 结果使用has拦截就会报错。
值得注意的是， has方法拦截的是HasProperty操作， 而不是HasOwnProperty操作， 即has方法不判断一个属性是对象自身的属性， 还是继承的属性。
由于for…in操作内部也会用到HasProperty操作， 所以has方法在for…in循环时也会生效。 

let stu1 = {

name: ‘Owen’,

score: 59

};

let stu2 = {

name: ‘Mark’,

score: 99

};

let handler = {

has(target, prop) {

if(prop === ‘score’ && target[prop] < 60) {

console.log(${target.name} 不及格);

return false;

}

return prop in target;

}

}

let oproxy1 = new Proxy(stu1, handler);

let oproxy2 = new Proxy(stu2, handler);

for(let a in oproxy1) {

console.log(oproxy1[a]);

}

// Owen

// Owen  不及格

for(let b in oproxy2) {

console.log(oproxy2[b]);

}

// Mark

// Mark 99
上面代码中，for…in循环时， has拦截会生效， 导致不符合要求的属性被排除在for…in循环之外。
5 construct()
construct方法用于拦截new命令， 下面是拦截对象的写法。 

var handler = {

construct(target, args, newTarget) {

return new target(…args);

}

};
construct方法可以接受两个参数。
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方法返回的必须是一个对象， 否则会报错。

var p = new Proxy(function() {}, {

construct: function(target, argumentsList) {

return 1;

}

});

new p() //  报错

6 deleteProperty() 
var handler = {
	deleteProperty(target, key) {
		invariant(key, 'delete');
		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方法拦截了delete操作符， 删除第一个字符为下划线的属性会报错。

7 defineProperty()
defineProperty方法拦截了Object.defineProperty操作。

var handler = {

defineProperty(target, key, descriptor) {

return false;

}

};

var target = {};

var proxy = new Proxy(target, handler);

proxy.foo = ‘bar’

// TypeError: proxy defineProperty handler returned false for property '“foo”‘
上面代码中， defineProperty方法返回false， 导致添加新属性会抛出错误。
8 getOwnPropertyDescriptor()
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 }
上面代码中， handler.getOwnPropertyDescriptor方法对于第一个字符为下划线的属性名会返回undefined。


9 getPrototypeOf()

getPrototypeOf方法主要用来拦截Object.getPrototypeOf() 运算符， 以及其他一些操作。

Object.prototype.proto

Object.prototype.isPrototypeOf()

Object.getPrototypeOf()

Reflect.getPrototypeOf()
instanceof运算符
下面是一个例子。 

var proto = {};

var p = new Proxy({}, {

getPrototypeOf(target) {

return proto;

}

});

Object.getPrototypeOf§ === proto // true
上面代码中， getPrototypeOf方法拦截Object.getPrototypeOf()， 返回proto对象。


10 isExtensible()

isExtensible方法拦截Object.isExtensible操作。

var p = new Proxy({}, {

isExtensible: function(target) {

console.log(“called”);

return true;

}

});

Object.isExtensible§

// “called”

// true
上面代码设置了isExtensible方法， 在调用Object.isExtensible时会输出called。
这个方法有一个强限制， 如果不能满足下面的条件， 就会抛出错误。 

Object.isExtensible(proxy) === Object.isExtensible(target)

//下面是一个例子。

var p = new Proxy({}, {

isExtensible: function(target) {

return false;

}

});

Object.isExtensible§ //  报错


11 ownKeys()

ownKeys方法用来拦截Object.keys() 操作。

let target = {};

let handler = {

ownKeys(target) {

return [‘hello’, ‘world’];

}

};

let proxy = new Proxy(target, handler);

Object.keys(proxy)

// [ ‘hello’, ‘world’ ]
上面代码拦截了对于target对象的Object.keys() 操作， 返回预先设定的数组。
下面的例子是拦截第一个字符为下划线的属性名。 

let target = {

_bar: ‘foo’,

prop: ‘bar’,

prop: ‘baz’

};

let handler = {

ownKeys(target) {

return Reflect.ownKeys(target).filter(key => key[0] !== '’);

}

};

let proxy = new Proxy(target, handler);

for(let key of Object.keys(proxy)) {

console.log(target[key]);

}

// "baz"

12 preventExtensions()

preventExtensions方法拦截Object.preventExtensions()。 该方法必须返回一个布尔值。
这个方法有一个限制， 只有当Object.isExtensible(proxy) 为false（ 即不可扩展） 时， proxy.preventExtensions才能返回true， 否则会报错。

var p = new Proxy({}, {

preventExtensions: function(target) {

return true;

}

});

Object.preventExtensions§ //  报错
上面代码中， proxy.preventExtensions方法返回true， 但这时Object.isExtensible(proxy) 会返回true， 因此报错。
为了防止出现这个问题， 通常要在proxy.preventExtensions方法里面， 调用一次Object.preventExtensions。 

var p = new Proxy({}, {

preventExtensions: function(target) {

console.log(“called”);

Object.preventExtensions(target);

return true;

}

});

Object.preventExtensions§

// “called”

// true


13 setPrototypeOf()

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);

proxy.setPrototypeOf(proxy, proto);

// Error: Changing the prototype is forbidden
上面代码中， 只要修改target的原型对象， 就会报错。


二、它作为一种设计模式

https://blog.csdn.net/i042416/article/details/81876198
可以用来进行改善用户体验，图片预加载，大图片加载等

三、它作为一种中间件解决跨域问题

可以和webpack结合使用

不吃饭会饿
关注
专栏目录
nginx中location中关于proxy_pass和rewrite的应用.rar
09-16
当我们谈论`proxy_pass`和`rewrite`时，这是两种强大的功能，它们可以协同工作以实现复杂的URL路由和反向代理设置。下面我们将深入探讨这两个指令的工作原理、用法以及它们在实际场景中的应用。 1. **proxy_pass**...
es6 javascript的Proxy 实例的方法
现在学习也不晚
12-03 9342
1 get()get方法用于拦截某个属性的读取操作。 上文已经有一个例子， 下面是另一个拦截读取操作的例子。var person = { name: " 张三 " }; var proxy = new Proxy(person, { get: function(target, property) { if(property in target) { return target[pro...
学习ES6时遇到的问题 TypeError: proxy
l1090865的博客
05-15 1130
今天看ES6的文档时，跟着proxy的案例敲代码遇到了一个错误 出现错误的代码： let target = { name: 'Tom', age: 24 } let handler = { get: function(target, key) { console.log('getting ' + key); return target[key]; // 不是target.key }, set: function(target, key, value)
ECMAScript 6之Proxy
基地的博客
03-26 1053
目录
Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'age'
热门推荐
babulongbo的博客
05-03 2万+
今天学习阮一峰老师的es6时，跟着敲一个实例时出现这个错误。 这个实例是： let validator = { set: function(obj, prop, value) { if (prop === 'age') { if (!Number.isInteger(value)) { throw new TypeError('The age is ...
javascript - proxy - 异常： ‘set‘ on proxy: trap returned falsish for property ‘message‘
LawssssCat的博客
02-28 2万+
定义 Proxy 代理对象的 set 的时候， 要返回 return true 。 特别是在严格模式下，否则，会报错 'set' on proxy: trap returned falsish for property 'message' # 应该如下 let handler = { get(obj, property) { }, set(obj, property, val...
3proxy-0.9.3_3proxy_
09-29
一个功能强大的代理软件，通过简单的配置即可实现快速透传
phpproxy-0.6
05-16
《PHPProxy：构建高效直接代理服务的利器》 在当今互联网世界中，代理服务作为一种重要的网络工具，被广泛应用于数据抓取、网络安全、隐私保护等多个领域。PHPProxy，正如其名，是一个用PHP语言编写的代理服务器...
proxyswitchysharp
11-21
而"使用必读.url"则可能是关于Proxy SwitchySharp的详细使用教程或者常见问题解答，对于初次使用者来说，阅读这份资料能更好地理解和掌握插件的使用方法。 在实际使用中，Proxy SwitchySharp提供了丰富的功能，如：...
proxyserver
03-04
一个用python写成的简易代理服务器proxyserver，可以通过该服务器对用户端请求做出应答
ES6 Proxy
无
10-24 1万+
前言   全文共计5万字左右，大约可阅读两小时，并不定时持续更新中。   此文可能是关于Proxy相对较全的文章之一，总结了Proxy代理几乎所有的用法、示例和注意事项，也有对部分代码的细节分析。结合语法和ECMAScript规范，系统性地阐释了JavaScript对象的内部方法和内部槽，对比了普通对象与代理对象之间的差异和共同点。另外也包括一些运用场景，如何分析代理的错误问题，以及如何优化解决等等。   建议阅读中根据目录细化拆分，并试着回答以下问题。 什么是trap？ 内部方法与trap、不变量三者的关
探究 JavaScript 中 Proxy Reflect 中的 receiver 参数
小白
04-06 684
使用 receiver 参数可以帮助我们更好地控制对象的行为，如果我们需要在对代理对象进行操作时对其行为进行更加精细的控制，就可以使用 receiver 参数来实现。在上面的例子中，我们使用了 Reflect.set() 方法设置了代理对象中的新属性，并传递了一个额外的参数 receiverObj 作为 receiver 参数。在上面的例子中，我们使用了 Proxy 对象对一个对象进行了代理，并重写了该对象中的方法。需要注意的是，在使用 receiver 参数时，我们需要特别小心，以免出现不可预期的行为。
js监听对象的方式
weixin_44283589的博客
08-30 738
【代码】js监听对象的方式。
throw new Error() 和 throw语句
qq_57057576的博客
07-12 1793
throw语句 throw语句的作用是手动中断程序执行，抛出一个错误。 注意，throw语句会中断程序的执行，导致throw语句后的语句无法正常执行 throw可以抛出任何类型的值，不仅仅为 throw new Error(), 也就是说，它的参数可以是任何值。 执行后，输出： 这与我们平常写代码，遇到bug时，是一样的。 throw语句属于手动判处错误，导致程序中断，而后面的语句不再执行。...
throw new Error() 真实的用法和throw error 的却别
vue
11-30 6712
问题复现 在工作时遇到了需要抛出异常并且需要自己捕获处理的地方，于是在抛出的地方写下 function parseExcel(con) { try { // doSomething } catch (error) { throw new Error('parse excel failed'); } } 在捕获的地方写下： try {...
Proxy 代理对象抛出 ‘set‘ on proxy: trap returned falsish for property ‘message‘
weixin_44283589的博客
02-03 2640
在严格模式下，否则，会报错 ‘set’ on proxy: trap returned falsish for property ‘message’定义 Proxy 代理对象的 set 的时候，要返回 return true。
ES6之Proxy
kaelyn_X的博客
11-13 3019
ES6 中新增的 Proxy 特性为开发者提供了一种实现元编程的“大杀器”。
es6 Proxy 实例的方法
歪脖先生的博客
01-26 866
Proxy 实例的方法 下面是上面这些拦截方法的详细介绍。 get() get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（即this关键字指向的那个对象），其中最后一个参数可选。 get方法的用法，上文已经有一个例子，下面是另一个拦截读取操作的例子。 var person = { name: "张三"};var pr
Proxy proxy
最新发布
09-13
Proxy proxy 是一个使用 Proxy 构造函数创建的代理实例。它通过 Proxy 构造函数的第一个参数 target 来指定要代理的目标对象，通过第二个参数 handler 来指定拦截操作的行为。Proxy 实例提供了一种机制，可以在目标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值