Javascript Proxy对象 简介
Javascript Proxy对象 简介
Javascript Proxy对象
改变你操作对象的方式
Proxies 是Javasript对象的中间件
...或者说至少是那种很早的版本。
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 proxiedObject = new Proxy(initialObj, handler);
调用Proxy构造函数,new Proxy()
将返回一个对象,不仅包含了initialObj
里的值,而且其基本操作(如get
和 set
)现在可以通过handler
对象来指定一些自定义逻辑。
我们写个例子来理解这个概念,
const handler = {
get: function() {
console.log('A value has been accessed');
}
}
const initialObj = {
id: 1,
name: 'Foo Bar'
}
const proxiedObj = new Proxy(initialObj, handler);
console.log(proxiedObj.name);
现在,如果我们没有构造一个Proxy对象,执行第14行的console.log(proxiedObj.name)
会在控制台输出 “Foo Bar”。
不过现在我们定义了一个Proxy,并在第三行get
方法中定义了一些自定义逻辑。
现在执行console.log(proxiedObj.name)
会在控制台输出 “A value has been accessed”。
仔细看,你会发现控制台中实际上有两条记录。 “A value has been accessed” 和 undefined
。 为什么?
Javascript Proxy对象 简介的更多相关文章
- JavaScript课程——Day07(对象简介、Math对象、时间对象、字符串对象)
1.对象简介 在javaScipt中,一切皆为对象或者皆可以被用作对象 宿主对象:window,document 内置对象:Number String Boolean Array数组 Obje ...
- JavaScript 之 对象属性的特性 和defineProperty方法
对象是无序属性的集合,而这些属性在创建是都带有一些特征值(可以理解为属性的属性,天生自带的),这些特征值是为了实现JavaScript引擎用的,因此JavaScript不能直接访问. JavaScri ...
- 转:JavaScript事件冒泡简介及应用
(本文转载自别处) JavaScript事件冒泡简介及应用 一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理 ...
- 代理(Proxy)模式简介
Proxy 模式简介 代理模式的两个应用: 打开文档时加载大图片 例如:如果有个对象是一张很大的图片,而这张图片需要花费很长时间才能显示出来,那么当这个图片包含在文档中的后面时,使用编辑器或浏览器打开 ...
- SharePoint JavaScript 客户端对象使用视频教程
本次视频教程是为大家介绍如何使用SharePoint JavaScript客户端对象,包括对于站点.列表.文档库.列表项.文件夹.文件和附件等基本对象的操作,同时,为大家举几个简单的应用的例子,让大家 ...
- es6学习笔记-proxy对象
前提摘要 尤大大的vue3.0即将到来,虽然学不动了,但是还要学的啊,据说vue3.0是基于proxy来进行对值进行拦截并操作,所以es6的proxy也是要学习一下的. 一 什么是proxy Prox ...
- Object.defineProperties()与Proxy对象代理
Object.defineProperties() 了不起啊..vue.js通过它实现双向绑定的 Object.defineProperties(obj,props) 方法直接在一个对象上定义新的属性 ...
- JavaScript原生对象及扩展
来源于 https://segmentfault.com/a/1190000002634958 内置对象与原生对象 内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始 ...
- 代理(Proxy)模式简介
一.代理(Proxy)模式简介 代理模式是结构型模式. 代理模式给某一个对象提供一个代理对象,并由代理对象控制对原对象的引用. 代理对象要继承于抽象主题,并控制原对象的引用 二.简单例子 抽象主题类 ...
随机推荐
- CentOS6.9下NFS配置说明
NFS是Network File System的缩写,即网络文件系统.它的主要功能是通过网络(一般是局域网)让不同的主机系统之间可以共享文件或目录.NFS客户端可以通过挂载(mount)的方式将NFS ...
- Crossing Rivers UVA - 12230 概率与期望
题目大意:有个人每天要去公司上班,每次会经过N条河,家和公司的距离为D,默认在陆地的速度为1,给出N条河的信息,包括起始坐标p,宽度L,以及船的速度v.船会往返在河的两岸,人到达河岸时,船的位置是随机 ...
- 【转载】深入理解Java的接口和抽象类
深入理解Java的接口和抽象类 对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太多不同的地方.很多人在初学的 ...
- PAT_A1034#Head of a Gang
Source: PAT A1034 Head of a Gang (30 分) Description: One way that the police finds the head of a gan ...
- TensorFlow的序列模型代码解释(RNN、LSTM)---笔记(16)
1.学习单步的RNN:RNNCell.BasicRNNCell.BasicLSTMCell.LSTMCell.GRUCell (1)RNNCell 如果要学习TensorFlow中的RNN,第一站应该 ...
- 为什么on用的时候会失效?
困扰了我一个很久的问题今天终于得带解决了,关于 on 的 用法: $("#hasLabels .link").on("click",function(){ .. ...
- Context、Select(day01)
Oracle sql: 4天 plsql: 2天 proc: 2天 数据库介绍 1.1 数据库简介 1.1.1 数据管理技术的发展 人工管理阶段:20世纪50年代中期之前 文件管理阶段:20世纪的50 ...
- Python列表、集合与字典(3)
目录 一.列表 二.集合 三.字典 一.列表 1. 列表初识 列表的使用为处理特定顺序排列的数据提供了便利,列表元素可以是字母.数字或者其他信息,同时所加元素之间不存在任何关系. 在Pytho ...
- MDK(KEIL5)如何生成.bin文件 【转】
最近要做个bin文件,网上找了好多都说的不够清楚,后来找到一篇实测可用,说明清楚的,转过来以便学习用. 参考传送门:https://blog.csdn.net/nx505j/article/detai ...
- FZU - 1601 - Alibaba's treasures
先上题目: Problem 1601 Alibaba's treasures Accept: 332 Submit: 636Time Limit: 1000 mSec Memory Lim ...