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 相关文章推荐
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
js返回顶部实例分享
Dec 21 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
详解JavaScript中return的用法
May 08 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
详解vue表单——小白速看
Apr 08 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
JS中的函数与对象的创建方式
May 12 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 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中的cookie
2006/11/26 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
php学习笔记之基础知识
2014/11/08 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
ExtJs使用总结(非常详细)
2012/03/22 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
Django--权限Permissions的例子
2019/08/28 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
如何真正的了解python装饰器
2020/08/14 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
工商管理应届生求职信
2013/10/07 职场文书
会计学个人自荐信模板
2013/12/13 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
成绩报告单家长评语
2014/12/30 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android