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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
H5上传本地图片并预览功能
May 08 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
基于Electron实现桌面应用开发代码实例
Jul 07 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接口中interface存在的意义
2013/06/27 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
python装饰器decorator介绍
2014/11/21 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
先进事迹报告会感言
2014/01/24 职场文书
市三好学生主要事迹
2014/01/28 职场文书
语文教学随笔感言
2014/02/18 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
校运动会广播稿300字
2014/10/07 职场文书
就业意向协议书
2015/01/29 职场文书
单位介绍信格式范文
2015/05/04 职场文书