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 相关文章推荐
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
javascript表单事件处理方法详解
May 15 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
React服务端渲染原理解析与实践
Mar 04 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 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和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
微信access_token的获取开发示例
2015/04/16 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
python中实现定制类的特殊方法总结
2014/09/28 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
详解python的数字类型变量与其方法
2016/11/20 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
详解django2中关于时间处理策略
2019/03/06 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
计算机应用职专应届生求职信
2013/11/12 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
人民检察院起诉书
2015/05/20 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏