传统的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的更多相关文章

  1. ES6 Proxy 性能之我见

    ES6 Proxy 性能之我见 本文翻译自https://thecodebarbarian.com/thoughts-on-es6-proxies-performance Proxy是ES6的一个强力 ...

  2. Vue3.0 响应式数据原理:ES6 Proxy

    Vue3.0 开始用 Proxy 代替 Object.defineProperty了,这篇文章结合实例教你如何使用Proxy 本篇文章同时收录[前端知识点]中,链接直达 阅读本文您将收获 JavaSc ...

  3. js es6 map 与 原生对象区别

    区别 object和Map存储的都是键值对组合.但是: object的键的类型是 字符串: map的键的类型是 可以是任意类型: 另外注意,object获取键值使用Object.keys(返回数组): ...

  4. ArcGIS JS 使用Proxy之 Printing Tools unable to connect to mapServer

    ArcGIS JS使用Proxy.ashx将地图服务隐藏,并在微博服务器端增加了地图服务权限判断. Proxy.ashx做了如下设置, <serverUrl url="http://l ...

  5. 关于vue.config.js 的 proxy 配置

    关于vue.config.js 的 proxy 配置有的同学不怎么明白项目里面有的配置了 pathRewrite 地址重写,有的又没有进行配置?/* * proxy代理配置的说明 * *接口例子:/z ...

  6. es6 proxy代理

    es6 新增构造函数 Proxy Proxy 构造函数,可以使用new 去创建,可以往里面插入两个参数,都是对象 let target = {} let handler = {} let proxy ...

  7. ES6 Proxy的应用场景

    一.相关API Proxy Reflect 二.Proxy应用场景 1.数据校验 表单提交的时候做数据校验,例如年龄是不是满足条件,数据类型是不是满足要求等等,这场场景非常适合使用Proxy. 下面展 ...

  8. js ES6 多行字符串 连接字符串

    1. 以前,js多行字符串用\n写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用` ... `表示: 旧版写法 alert("你好,\n 我叫\n Olive" ...

  9. ES6 Proxy和Reflect(下)

    construct() construct方法用于拦截new命令. var handler = { construct (target, args) { return new target(...ar ...

  10. ES6 Proxy和Reflect (上)

    Proxy概述 Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程语言进行编程. Proxy可以理 ...

随机推荐

  1. Linux性能监控(二)-top

    top命令可以用来监控服务器CPU.内存的运行情况,是Linux一个经常使用到的命令. 基本用法 第一行 显示当前系统运行信息,系统当前时间是23:23:21,运行了315days,当前有2个用户登录 ...

  2. Zabbix6.0使用教程 (二)—zabbix6.0常用术语

    上一次我们已经详细介绍了zabbix6.0的新增功能,本篇我们来说说zabbix6.0常用的一些术语,这个对小伙伴日常使用zabbix的时候还是非常有用,建议大家收藏起来,话不多说,附上干货. 概览 ...

  3. 单词本z ambition 雄心 amb = ab = about = around = 环绕

    ambition 雄心 amb = ab = about = around = 环绕 it = go = 走 ion 名词 重点是 amb 环绕 这里是抽象含义 表示内心向外扩展 所以是雄心 ambu ...

  4. PV的回收策略、访问策略和状态

    PersistentVolume(PV)的回收策略.访问策略和状态是Kubernetes存储管理中的重要概念. 回收策略 Retain:当PV的回收策略设置为Retain时,即使对应的Persiste ...

  5. 【预训练语言模型】 使用Transformers库进行BERT预训练

    基于 HuggingFace的Transformer库,在Colab或Kaggle进行预训练. 鉴于算力限制,选用了较小的英文数据集wikitext-2 目的:跑通Mask语言模型的预训练流程 一.准 ...

  6. KETTLE4个工作中有用的复杂实例--2、两表数据比较,循环取数据,比较后自动同步(部门、单位数据同步)

    附:Kettle实战视频教程,需要的朋友可以看看学习下哈~~ kettle实战第一讲-文件和数据库表的互相转换处理_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili kettle实战第二讲-数据库单 ...

  7. 解锁通达信金融终端Level-2功能

    外挂方式,不修改原程序. 逆向通达信Level-2 续十一 (无帐号登陆itrend研究版) 逆向通达信Level-2 续十 (trace脱壳) 逆向通达信Level-2 续九 (无帐号打开itren ...

  8. Android 圆形进度条ProgressBar实现固定进度

    原文: Android 圆形进度条ProgressBar实现固定进度-Stars-One的杂货小窝 之前遇到一个问题,发现Android里的圆形进度条无法固定一个进度,记录一下解决方法 探究 假设我们 ...

  9. 【福利】JetBrains 全家桶永久免费使用

    Jetbrains系列的IDE公认是最好的集成开发工具,但是收费且挺贵.我们以PhpStorm为例,新用户第一年需要199$,注意是$,还不是人民币,这个价格一上来肯定筛选掉一大批用户.确实好用,所以 ...

  10. Spring Security 中的 BCryptPasswordEncoder

    一.使用BCryptPasswordEncoder加密的值可以解出来吗 Spring Security 中的 BCryptPasswordEncoder 是一种单向加密算法,它是为了安全性考虑而设计的 ...