ES5---Proxy的理解的使用
定义:Proxy原意为“代理”,在这可以理解为代理/拦截器的意思。Proxy在一个目标对象前放置了一个拦截,凡是外界对该对象的访问,都必须通过这层拦截,所以Proxy可以对外界的访问进行过滤和改写。
基本用法:ES6提原生提供Proxy构造函数,target代表要拦截目标对象,handler也是一个对象,用来定制拦截行为,一般是get,set等操作
let proxy = new Proxy(target, handler);
下面是 Proxy 支持的拦截操作一览,一共 13 种

拦截操作方法的使用:
get(target,Propkey,proxy)方法:第一个参数为目标对象,第二个参数为目标对象上的属性,第三个参数是可选的,是proxy实例本身
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"
通过proxy读取属性(get)和get的继承可以实现执行某个函数来达到链式操作
var pipe = 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;
let a = pipe(3).double.pow.reverseInt.get;
console.log(a)//
get方法的第三个参数一般都是指向proxy实例,proxy对象的getReceiver属性是由proxy对象提供的,所以receiver指向proxy对象。
const proxy = new Proxy({}, {
get: function(target, key, receiver) {
return receiver;
}
});
proxy.getReceiver === proxy // true
set方法用来拦截某个属性的赋值操作,可以接受四个参数,依次为目标对象、属性名、属性值和 Proxy 实例本身,其中最后一个参数可选。
ES5---Proxy的理解的使用的更多相关文章
- [每日一题]面试官问:谈谈你对ES6的proxy的理解?
[每日一题]面试官问:谈谈你对ES6的proxy的理解? 关注「松宝写代码」,精选好文,每日一题 作者:saucxs | songEagle 一.前言 2020.12.23 日刚立的 flag,每日一 ...
- 深入理解Proxy 及 使用Proxy实现vue数据双向绑定
阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...
- 使用 Proxy + Promise 实现 依赖收集
(深入浅出Vue基于“依赖收集”的响应式原理) ,这篇文章讲的是通过一个通俗易懂例子,介绍了 如何用Object.defineProperty 实现的“依赖收集”的原理.Object.definePr ...
- ES6中的元编程-Proxy & Reflect
前言 ES6已经出来好久了,但是工作中比较常用的只有let const声明,通过箭头函数改this指向,使用promise + async 解决异步编程,还有些数据类型方法...所以单独写一篇文章学习 ...
- ES6入门:数据劫持、Proxy、Reflect
什么是数据劫持 Object数据劫持实现原理 Array数据劫持的实现原理 Proxy.Reflect 一.什么是数据劫持 定义:访问或者修改对象的某个属性时,在访问和修改属性值时,除了执行基本的数据 ...
- 12,13 Proxy和Reflect
Proxy和Reflect Proxy(代理) Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程 ...
- ES6 Proxy和Reflect (上)
Proxy概述 Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程语言进行编程. Proxy可以理 ...
- es6学习笔记-Proxy、Reflect、Promise
Proxy Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程. Proxy 可以理解成,在目标对象之前 ...
- ES6中的proxy
1 概述 Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写. Proxy 这个词的原意是代理,用在这 ...
- Proxy --概述篇
概述: Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程. Proxy 可以理解成,在目标对象之前架设 ...
随机推荐
- 如何判断一个String字符串不为空或这不为空字符串
如何判断一个String字符串不为空或这不为空字符串 转载兵哥LOVE坤 最后发布于2018-07-27 00:00:05 阅读数 5144 收藏 展开 1.校验不为空: String str ...
- Python抓取国家医疗费用数据:国家名、人均开销
前言 整个世界正被大流行困扰着,不同国家拿出了不同的应对策略,也取得了不同效果.这也是本文的脑洞来源,打算研究一下各国在医疗基础设置上的开支,对几个国家的医疗费用进行数据可视化. 由于没有找到最近一年 ...
- 题解 P3870 【[TJOI2009]开关】/基础分块学习小结
直接进入正题: 分块: 分块分块,就是把一个长串东西,分为许多块,这样,我们就可以在操作一个区间的时候,对于在区间里面完整的块,直接操作块,不完整的直接操作即可,因为不完整,再加上一个块本身就不大,复 ...
- ORA-12154: TNS:could not resolve the connect identifier specified. Solved.
进入系统属性页面 rundll32.exe shell32.dll,Control_RunDLL sysdm.cpl,, 并添加系统环境变量 ORACLE_HOME = ${path} TNS_ADM ...
- Yolo训练自定义目标检测
Yolo训练自定义目标检测 参考darknet:https://pjreddie.com/darknet/yolo/ 1. 下载darknet 在 https://github.com/pjreddi ...
- day01微信小程序
一.基本概要 1.一个程序接口,可以集成很多功能,也就是在程序上再次开发 腾讯:微信+小程序 阿里:支付宝 +小程序 小程序的使用量很多 2.为什么要微信小程序? 1.微信用户群体大 2.容易推广, ...
- 在执行 pip install 时遇到错误:python setup.py egg_info ...
最近重新安装win10 64位专业版, 正好遇到python3.8发布,试了一下.结果jupyter都安装不了...心碎. ERROR: Command errored out with exit s ...
- WireGuard 教程:WireGuard 的工作原理
原文链接:https://fuckcloudnative.io/posts/wireguard-docs-theory/ WireGuard 是由 Jason Donenfeld 等人用 C 语言编写 ...
- 火车运输(最大生成树+lca) 洛谷P1967
货车运输 题目描述 \(A\) 国有 \(n\) 座城市,编号从 \(1\) 到 \(n\) ,城市之间有 \(m\) 条双向道路.每一条道路对车辆都有重量限制,简称限重. 现在有 \(q\) 辆货车 ...
- springboot freemark linux 找不到ftl文件
文件路径: 再idea中这样写是可以正常导出文件,但是 打成jar放到linux上就找不到文件了. String templatePath =WordUtils.class.getResource(& ...