ES6知识点整理之Proxy的应用实例详解


Posted in Javascript onApril 16, 2019

本文实例讲述了ES6知识点整理之Proxy的应用。分享给大家供大家参考,具体如下:

Proxy 用于修改对象某些操作的默认行为,可以对外界的访问进行过滤和改写,其概念类似于元编程。

Proxy 让我们可以对任何对象的绝大部分行为进行监听和干涉,实现更多的自定义程序行为。在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截。

目前【兼容性】存在一定的问题,目前在chrome和ff浏览器中的非严格模式下可用,一些先进的技术即使在目前不能广泛应用,但随着时间的流逝,都将会进入程序员日常的编程中。

注: 博客整理时间:2018-03-24 16:21:15

初识Proxy

var obj = {name:'Joh'};
var proxy = new Proxy(obj, {
 get (target, key) {
  return 'test1';
 },
 set (target, key, value) {
  target[key] = value
 }
});
console.log(proxy.name); // test1 进行get取值
proxy.name = 'test2'; // 进行set设置
console.log(obj.name); // test2

通过Proxy对象进行拦截target对象的属性

完整的使用Proxy进行设置, 获取,修改和删除的案例

var obj = {name:'Joh',group:'g1',_type:'student'};
var proxy = new Proxy(obj, {
 get (target, key) {
  if(key[0]!== '_') {
   // return Reflect.get(target,key); // 效果等同于下面的return语句
   return target[key];
  };
 },
 set (target, key, value) {
  if(key[0]!== '_') {
   // Reflect.set(target,key,value);
   return target[key] = value;
  }
 },
 deleteProperty(target, key) {
  // 业务逻辑
  if(key[0] !== '_') {
   // Reflect.deleteProperty(target, key);
   delete target[key];
  }
 }
});
console.log(proxy.name); // Joh
console.log(obj.name); // Joh
proxy.name = 'Lily'; // 在非严格模式下的赋值操作,严格模式将会报错
console.log(obj.name); // Lily
delete proxy.name; // 未能成功删除,因为上面内部有判断
console.log(obj.name); // undefined 成功删除
delete proxy.group;
console.log(obj.group); // undefined 成功删除
delete proxy._type;
console.log(obj._type); // student
proxy.color='red';
console.log(obj.color); // red

其中借助Reflect实现和直接实现的效果等同

通过has方法和in关键字进行拦截的示例:

var obj = {name:"Joh",_name:"Lily"};
var proxy = new Proxy(obj, {
 has(target, key) {
  if(key[0] === '_'){
   return false;
  } else {
   return key in target;
  }
 }
});
console.log('has name attr: ', 'name' in proxy); // has name attr: true
console.log('has _name attr: ', '_name' in proxy); // has _name attr: false

使用ownKeys方法与for-in遍历过滤符合特定规则属性的示例

var obj = {name:"Joh",_name:"Lily", age:10, group:"g1"};
var proxy = new Proxy(obj, {
 ownKeys (target) {
  return Reflect.ownKeys(target).filter(key => key[0] !== '_');
 }
});
for(var k in proxy) {
 console.log(k); // 分别输出 name age group 过滤了 _name
}

通过apply方法对函数调用的拦截

function test() {
 console.log('hello world');
}
var proxyFun = new Proxy(test,{
 apply(target,ctx,args) {
  console.log('proxy apply');
  return Reflect.apply(target,ctx,args);
 }
});
proxyFun(); // 分别输出 proxy apply 和 hello world
// proxyFun.apply(); // 同样,分别输出 proxy apply 和 hello world
// proxyFun.call(); // 同样,分别输出 proxy apply 和 hello world

通过construct方法对构造函数实例化的拦截

function User() {
 console.log('this is a contructor');
}
var ClassProxy = new Proxy(User, {
 construct(target,args) {
  console.log('proxy construct');
  return Reflect.construct(target,args);
 }
});
new ClassProxy(); // 分别输出 proxy construct 和 this is a contructor

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
js实现删除li标签一行内容
Apr 16 #Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 #Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 #Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 #Javascript
详解JavaScript中的强制类型转换
Apr 15 #Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 #Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 #Javascript
You might like
PHP开发大型项目的一点经验
2006/10/09 PHP
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
学习ExtJS 访问容器对象
2009/10/07 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
一则python3的简单爬虫代码
2014/05/26 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
python实现石头剪刀布程序
2021/01/20 Python
python Tkinter的图片刷新实例
2019/06/14 Python
基于Python函数和变量名解析
2019/07/19 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
python利用opencv实现颜色检测
2021/02/23 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
深圳茁壮笔试题
2015/05/28 面试题
项目经理岗位职责
2013/11/11 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2016教师国培研修感言
2015/12/08 职场文书
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers