详解ES6中的代理模式——Proxy


Posted in Javascript onJanuary 08, 2018

什么是代理模式

代理模式(英语:Proxy Pattern)是程序设计中的一种设计模式。

所谓的代理者是指一个类别可以作为其它东西的接口。代理者可以作任何东西的接口:网络连接、内存中的大对象、文件或其它昂贵或无法复制的资源。

著名的代理模式例子为引用计数(英语:reference counting)指针对象。

当一个复杂对象的多份副本须存在时,代理模式可以结合享元模式以减少内存用量。典型作法是创建一个复杂对象及多个代理者,每个代理者会引用到原本的复杂对象。而作用在代理者的运算会转送到原本对象。一旦所有的代理者都不存在时,复杂对象会被移除。

上面是维基百科中对代理模式的一个整体的定义.而在JavaScript中代理模式的具体表现形式就是ES6中的新增对象---Proxy

什么是Proxy对象

在MDN上对于 Proxy 的解释是:

Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。

简单来说: Proxy 对象就是可以让你去对JavaScript中的一切合法对象的基本操作进行自定义.然后用你自定义的操作去覆盖其对象的基本操作.也就是当一个对象去执行一个基本操作时,其执行的过程和结果是你自定义的,而不是对象的.

:sweat:好吧,用文字表达可能太复杂了.我们还是直接上代码吧.

首先Proxy的语法是:

let p = new Proxy(target, handler);

其中:

  1. target 是你要代理的对象.它可以是JavaScript中的任何合法对象.如: (数组, 对象, 函数等等)
  2. handler 是你要自定义操作方法的一个集合.
  3. p 是一个被代理后的新对象,它拥有 target 的一切属性和方法.只不过其行为和结果是在 handler 中自定义的.

然后让我们来看这段代码:

let obj = {
 a: 1,
 b: 2,
}

const p = new Proxy(obj, {
 get(target, key, value) {
  if (key === 'c') {
   return '我是自定义的一个结果';
  } else {
   return target[key];
  }
 },

 set(target, key, value) {
  if (value === 4) {
   target[key] = '我是自定义的一个结果';
  } else {
   target[key] = value;
  }
 }
})
console.log(obj.a) // 1
console.log(obj.c) // undefined
console.log(p.a) // 1
console.log(p.c) // 我是自定义的一个结果
obj.name = '李白';
console.log(obj.name); // 李白
obj.age = 4;
console.log(obj.age); // 4
p.name = '李白';
console.log(p.name); // 李白
p.age = 4;
console.log(p.age); // 我是自定义的一个结果

从上面这段代码中,我可以很清楚的看到 Proxy 对象的作用.即是之前所受的 用于定义基本操作的自定义行为 .同样的 get 和 set 操作.没有没代理的对象所得的结果是其JavaScript本身的执行机制运行计算后所得到的.而被代理了的对象的结果则是我们自定义的.

Proxy所能代理的范围--handler

在上面代码中,我们看到了构造一个代理对象时所传的第二个参数 handler ,这个 handler 对象是由 get 和 set 两个函数方法组成的.这两个方法会在一个对象被 get 和 set 时被调用执行,以代替原生对象上的操作.那么为什么在 handler ,定义 get 和 set 这两个函数名之后就代理对象上的 get 和 set 操作了呢?

实际上 handler 本身就是ES6所新设计的一个对象.它的作用就是用来 自定义代理对象的各种可代理操作 。它本身一共有13中方法,每种方法都可以代理一种操作.其13种方法如下:

handler.getPrototypeOf()

// 在读取代理对象的原型时触发该操作,比如在执行 Object.getPrototypeOf(proxy) 时。

handler.setPrototypeOf()

// 在设置代理对象的原型时触发该操作,比如在执行 Object.setPrototypeOf(proxy, null) 时。

handler.isExtensible()

// 在判断一个代理对象是否是可扩展时触发该操作,比如在执行 Object.isExtensible(proxy) 时。

handler.preventExtensions()

// 在让一个代理对象不可扩展时触发该操作,比如在执行 Object.preventExtensions(proxy) 时。

handler.getOwnPropertyDescriptor()

// 在获取代理对象某个属性的属性描述时触发该操作,比如在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时。

handler.defineProperty()

// 在定义代理对象某个属性时的属性描述时触发该操作,比如在执行 Object.defineProperty(proxy, "foo", {}) 时。

handler.has()

// 在判断代理对象是否拥有某个属性时触发该操作,比如在执行 "foo" in proxy 时。

handler.get()

// 在读取代理对象的某个属性时触发该操作,比如在执行 proxy.foo 时。

handler.set()

// 在给代理对象的某个属性赋值时触发该操作,比如在执行 proxy.foo = 1 时。

handler.deleteProperty()

// 在删除代理对象的某个属性时触发该操作,比如在执行 delete proxy.foo 时。

handler.ownKeys()

// 在获取代理对象的所有属性键时触发该操作,比如在执行 Object.getOwnPropertyNames(proxy) 时。

handler.apply()

// 在调用一个目标对象为函数的代理对象时触发该操作,比如在执行 proxy() 时。

handler.construct()

// 在给一个目标对象为构造函数的代理对象构造实例时触发该操作,比如在执行new proxy() 时。

Proxy的作用

对于代理模式 Proxy 的作用主要体现在三个方面:

1、 拦截和监视外部对对象的访问

2、 降低函数或类的复杂度

2、 在复杂操作前对操作进行校验或对所需资源进行管理

而对于这三个使用方面的具体表现大家可以参考这篇文章-- 实例解析ES6 Proxy使用场景

Proxy的兼容性

详解ES6中的代理模式——Proxy

参考资料:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
js实现图片360度旋转
Jan 22 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 Javascript
微信小程序input抖动问题的修复方法
Mar 03 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 #Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 #Javascript
详解weex默认webpack.config.js改造
Jan 08 #Javascript
关于vue单文件中引用路径的处理方法
Jan 08 #Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 #Javascript
Node.js使用Koa搭建 基础项目
Jan 08 #Javascript
JavaScript体验异步更好的解决办法
Jan 08 #Javascript
You might like
php 数学运算验证码实现代码
2009/10/11 PHP
php简单实现快速排序的方法
2015/04/04 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
python爬虫常用的模块分析
2014/08/29 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
机关门卫岗位职责
2013/12/30 职场文书
预备党员的自我评价
2014/03/12 职场文书
收款委托书范本
2014/09/11 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
营业员岗位职责
2015/02/11 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang