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里的值,而且其基本操作(如getset)现在可以通过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对象 简介的更多相关文章

  1. JavaScript课程——Day07(对象简介、Math对象、时间对象、字符串对象)

    1.对象简介 在javaScipt中,一切皆为对象或者皆可以被用作对象 宿主对象:window,document 内置对象:Number  String  Boolean  Array数组  Obje ...

  2. JavaScript 之 对象属性的特性 和defineProperty方法

    对象是无序属性的集合,而这些属性在创建是都带有一些特征值(可以理解为属性的属性,天生自带的),这些特征值是为了实现JavaScript引擎用的,因此JavaScript不能直接访问. JavaScri ...

  3. 转:JavaScript事件冒泡简介及应用

    (本文转载自别处) JavaScript事件冒泡简介及应用   一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理 ...

  4. 代理(Proxy)模式简介

    Proxy 模式简介 代理模式的两个应用: 打开文档时加载大图片 例如:如果有个对象是一张很大的图片,而这张图片需要花费很长时间才能显示出来,那么当这个图片包含在文档中的后面时,使用编辑器或浏览器打开 ...

  5. SharePoint JavaScript 客户端对象使用视频教程

    本次视频教程是为大家介绍如何使用SharePoint JavaScript客户端对象,包括对于站点.列表.文档库.列表项.文件夹.文件和附件等基本对象的操作,同时,为大家举几个简单的应用的例子,让大家 ...

  6. es6学习笔记-proxy对象

    前提摘要 尤大大的vue3.0即将到来,虽然学不动了,但是还要学的啊,据说vue3.0是基于proxy来进行对值进行拦截并操作,所以es6的proxy也是要学习一下的. 一 什么是proxy Prox ...

  7. Object.defineProperties()与Proxy对象代理

    Object.defineProperties() 了不起啊..vue.js通过它实现双向绑定的 Object.defineProperties(obj,props) 方法直接在一个对象上定义新的属性 ...

  8. JavaScript原生对象及扩展

    来源于 https://segmentfault.com/a/1190000002634958 内置对象与原生对象 内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始 ...

  9. 代理(Proxy)模式简介

    一.代理(Proxy)模式简介 代理模式是结构型模式. 代理模式给某一个对象提供一个代理对象,并由代理对象控制对原对象的引用. 代理对象要继承于抽象主题,并控制原对象的引用 二.简单例子 抽象主题类 ...

随机推荐

  1. CentOS6.9下NFS配置说明

    NFS是Network File System的缩写,即网络文件系统.它的主要功能是通过网络(一般是局域网)让不同的主机系统之间可以共享文件或目录.NFS客户端可以通过挂载(mount)的方式将NFS ...

  2. Crossing Rivers UVA - 12230 概率与期望

    题目大意:有个人每天要去公司上班,每次会经过N条河,家和公司的距离为D,默认在陆地的速度为1,给出N条河的信息,包括起始坐标p,宽度L,以及船的速度v.船会往返在河的两岸,人到达河岸时,船的位置是随机 ...

  3. 【转载】深入理解Java的接口和抽象类

    深入理解Java的接口和抽象类 对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太多不同的地方.很多人在初学的 ...

  4. 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 ...

  5. TensorFlow的序列模型代码解释(RNN、LSTM)---笔记(16)

    1.学习单步的RNN:RNNCell.BasicRNNCell.BasicLSTMCell.LSTMCell.GRUCell (1)RNNCell 如果要学习TensorFlow中的RNN,第一站应该 ...

  6. 为什么on用的时候会失效?

    困扰了我一个很久的问题今天终于得带解决了,关于 on 的 用法: $("#hasLabels .link").on("click",function(){ .. ...

  7. Context、Select(day01)

    Oracle sql: 4天 plsql: 2天 proc: 2天 数据库介绍 1.1 数据库简介 1.1.1 数据管理技术的发展 人工管理阶段:20世纪50年代中期之前 文件管理阶段:20世纪的50 ...

  8. Python列表、集合与字典(3)

    目录 一.列表 二.集合 三.字典 一.列表 1. 列表初识   列表的使用为处理特定顺序排列的数据提供了便利,列表元素可以是字母.数字或者其他信息,同时所加元素之间不存在任何关系.   在Pytho ...

  9. MDK(KEIL5)如何生成.bin文件 【转】

    最近要做个bin文件,网上找了好多都说的不够清楚,后来找到一篇实测可用,说明清楚的,转过来以便学习用. 参考传送门:https://blog.csdn.net/nx505j/article/detai ...

  10. FZU - 1601 - Alibaba's treasures

    先上题目: Problem 1601 Alibaba's treasures Accept: 332    Submit: 636Time Limit: 1000 mSec    Memory Lim ...