js es6 Proxy
传统的get,set
ES6 中引入Proxies,让你可以自定义Object的基本操作。例如,get就是Object的基础操作方法。
const obj = {
val: 10
};
console.log(obj.val);
这里,console.log()表达式在对象obj上执行get方法来获取val的值。
另一个对象的基本操作方法是 set。
const obj = {
val: 10
};
obj.val2 = 20;
这里,set方法用来给对象obj设置一个新的值。
proxy
const handler={
get:function(obj,prop){
console.log('get');
return obj[prop];
}
}
const initialobj={
id:1,
name:'Foo Bar'
}
const proxiedObject=new Proxy(initialobj,handler);
console.log(proxiedObject.id);
这个时候我们得到的结果为1,那么这样有什么用呢?可以想象一下假如我们暴露出整个initialobj对象,那么其中的属性会全部暴露出去。
proxy这个意思是代理的意思,那么这个时候我们可以这样处理。
比如我想封装这个initialobj对象,那么我改如何?
或者说我想让id为private,ok,这就是一个困难了。
当然我们有方法的,比如说,拆分,但是这不是ok的。
const handler={
get:function(obj,prop){
if(prop=='id')
{
return 6;
}
console.log('get');
return obj[prop];
}
}
const initialobj={
id:1,
name:'Foo Bar'
}
const proxiedObject=new Proxy(initialobj,handler);
console.log(proxiedObject.id);
这个时候就是返回6了,相当于代理,门卫,引领三个关键词。
<script>
const handler = {
get: function(obj, prop) {
if (prop == "id") {
return 6;
}
console.log("get");
return obj[prop];
},
set: function(obj, prop, value) {
if (typeof value !== "string") {
throw new Error("Only string values can be stored in this object!");
} else {
obj[prop] = value;
}
}
};
const initialobj = {
id: 1,
name: "Foo Bar"
};
const proxiedObject = new Proxy(initialobj, handler);
console.log(proxiedObject.id);
proxiedObject.name = 8;
</script>
set 同样是 代理 门卫 引领 三个关键词来表达。
js es6 Proxy的更多相关文章
- ES6 Proxy 性能之我见
ES6 Proxy 性能之我见 本文翻译自https://thecodebarbarian.com/thoughts-on-es6-proxies-performance Proxy是ES6的一个强力 ...
- Vue3.0 响应式数据原理:ES6 Proxy
Vue3.0 开始用 Proxy 代替 Object.defineProperty了,这篇文章结合实例教你如何使用Proxy 本篇文章同时收录[前端知识点]中,链接直达 阅读本文您将收获 JavaSc ...
- js es6 map 与 原生对象区别
区别 object和Map存储的都是键值对组合.但是: object的键的类型是 字符串: map的键的类型是 可以是任意类型: 另外注意,object获取键值使用Object.keys(返回数组): ...
- ArcGIS JS 使用Proxy之 Printing Tools unable to connect to mapServer
ArcGIS JS使用Proxy.ashx将地图服务隐藏,并在微博服务器端增加了地图服务权限判断. Proxy.ashx做了如下设置, <serverUrl url="http://l ...
- 关于vue.config.js 的 proxy 配置
关于vue.config.js 的 proxy 配置有的同学不怎么明白项目里面有的配置了 pathRewrite 地址重写,有的又没有进行配置?/* * proxy代理配置的说明 * *接口例子:/z ...
- es6 proxy代理
es6 新增构造函数 Proxy Proxy 构造函数,可以使用new 去创建,可以往里面插入两个参数,都是对象 let target = {} let handler = {} let proxy ...
- ES6 Proxy的应用场景
一.相关API Proxy Reflect 二.Proxy应用场景 1.数据校验 表单提交的时候做数据校验,例如年龄是不是满足条件,数据类型是不是满足要求等等,这场场景非常适合使用Proxy. 下面展 ...
- js ES6 多行字符串 连接字符串
1. 以前,js多行字符串用\n写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用` ... `表示: 旧版写法 alert("你好,\n 我叫\n Olive" ...
- ES6 Proxy和Reflect(下)
construct() construct方法用于拦截new命令. var handler = { construct (target, args) { return new target(...ar ...
- ES6 Proxy和Reflect (上)
Proxy概述 Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程语言进行编程. Proxy可以理 ...
随机推荐
- 新零售SaaS架构:订单履约系统架构设计(万字图文总结)
什么是订单履约系统? 订单履约系统用来管理从接收客户订单到将商品送达客户手中的全过程. 它连接了上游交易(客户在销售平台下单环)和下游仓储配送(如库存管理.物流配送),确保信息流顺畅.操作协同,提升整 ...
- Python函数对象与闭包函数
[一]函数对象 函数对象指的是函数可以被当做 数据 来处理,具体可以分为四个方面的使用 [1]函数可以被引用 def add(x,y): return x + y func = add res = f ...
- 加载远程vue文件 vue3-sfc-loader
需求 项目在写一些需求的时候,现场可能会有些变动,但是不想从新打包,这种情况可以考虑单独不打包的vue文件 注意vue2 import { loadModule } from 'vue3-sfc-lo ...
- Linux安装Nginx详细教程
一.下载Nginx安装包 Nginx官网下载地址 根据需求选择自己需要的版本下载后上传至服务器(路径自行决定). 如果服务器有外网,可以直接在服务器上下载. wget -c https://nginx ...
- 回声消除AEC(Acoustic Echo Cancellation)概括介绍及基本原理分析
回声消除的基本概念 回音消除(Acoustic Echo Cancelling)是透过音波干扰方式消除麦克风与喇叭因空气产生回受路径(feedback path)而产生的杂音.通俗一点来说,回声消 ...
- 使用Wireshark在RTP流中提取中264数据(针对udp)(转)
调试rtsp收发流时,经常会需要抓包以确认是网络问题还是程序问题还是其它问题.通过tcpdump或者wireshark抓到的包通常是rtp流,保存为.pcap格式文件后中,可通过wireshark进行 ...
- HiSi 3516CV500 NNIE(Neural Network Inference Engine) 摸鱼记录(1) --- 环境搭建
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
- 虚拟现实(VR)在医疗保健中的5种应用
医疗保健中的VR虚拟现实 虚拟现实的由来已久,18世纪,法国的医生使用布制的分娩模拟器向助产师和外科医生教授医学技术.在20世纪60年代初,医生一边对心肺复苏学员口述心肺复苏的技巧,一边使用一家塑料玩 ...
- 关于云XR介绍,以及5G时代云化XR的发展机遇
XR技术进入全面沉浸化时代 基于云化XR技术将大幅降低XR终端设备的计算负荷和能耗,摆脱线缆的束缚,XR终端设备将变得更轻.更沉浸.更智能.更有利于商业化. 网络XR终端能力的提升,将推动XR技术进入 ...
- Walrus 0.6发布:预览资源变更、丰富公有云支持,满足企业多云需求
近日,数澈软件Seal(以下简称"Seal")宣布基于 IaC 的开源应用管理平台 Walrus 0.6 正式发布! 在之前的版本中,Walrus 引入应用模型并优化了应用部署体验 ...