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

2024-07-28 19:17:25

本文实例讲述了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程序设计有所帮助。

浅谈es6语法 (Proxy和Reflect的对比)

如下所示: { //原始对象 let obj={ time:'2017-03-11', name:'net', _r:123 }; //(代理商)第一个参数代理对象,第二个参数真正代理的东西 let monitor=new Proxy(obj,{ // 拦截对象属性的读取 get(target,key){ return target[key].replace('2017','2018') }, // 拦截对象设置属性 set(target,key,value){ if(key==='name')
详解ES6中的代理模式——Proxy

什么是代理模式代理模式(英语:Proxy Pattern)是程序设计中的一种设计模式. 所谓的代理者是指一个类别可以作为其它东西的接口.代理者可以作任何东西的接口:网络连接.内存中的大对象.文件或其它昂贵或无法复制的资源. 著名的代理模式例子为引用计数(英语:reference counting)指针对象. 当一个复杂对象的多份副本须存在时,代理模式可以结合享元模式以减少内存用量.典型作法是创建一个复杂对象及多个代理者,每个代理者会引用到原本的复杂对象.而作用在代理者的运算会转送到原本对象.一
ES6中Proxy代理用法实例浅析

本文实例讲述了ES6中Proxy代理用法.分享给大家供大家参考,具体如下: ES6中提出了一个新的特性,就是proxy,用来拦截在一个对象上的指定操作.这个功能非常的有用.举一个例子来说: var engineer = { name: 'Joe Sixpack', salary: 50 }; var interceptor = { set: function (receiver, property, value) { console.log(property, 'is changed to',
实例解析ES6 Proxy使用场景介绍

ES6 中的箭头函数.数组解构.rest 参数等特性一经实现就广为流传,但类似 Proxy 这样的特性却很少见到有开发者在使用,一方面在于浏览器的兼容性,另一方面也在于要想发挥这些特性的优势需要开发者深入地理解其使用场景.就我个人而言是非常喜欢 ES6 的 Proxy,因为它让我们以简洁易懂的方式控制了外部对对象的访问.在下文中,首先我会介绍 Proxy 的使用方式,然后列举具体实例解释 Proxy 的使用场景. Proxy,见名知意,其功能非常类似于设计模式中的代理模式,该模式常用于三个方面:
详细探究ES6之Proxy代理

前言在ES6中,Proxy构造器是一种可访问的全局对象,使用它你可以在对象与各种操作对象的行为之间收集有关请求操作的各种信息,并返回任何你想做的.ES6中的箭头函数.数组解构.rest 参数等特性一经实现就广为流传,但类似 Proxy 这样的特性却很少见到有开发者在使用,一方面在于浏览器的兼容性,另一方面也在于要想发挥这些特性的优势需要开发者深入地理解其使用场景.就我个人而言是非常喜欢 ES6 的 Proxy,因为它让我们以简洁易懂的方式控制了外部对对象的访问.在下文中,首先我会介绍 Prox
ES6中Proxy与Reflect实现重载(overload)的方法

本文实例讲述了ES6中Proxy与Reflect实现重载(overload)的方法.分享给大家供大家参考,具体如下: Proxy与Reflect实现重载(overload) 从语法角度讲JavaScript不支持重载.原因很简单,JS中函数可以传入任意类型.任意个数的参数,通通可以通过在函数内使用this.arguments获得.这样,就无法实现同名函数参数列表不同实现不同功能.当然,在实际使用过程中,可以人为去检测传入实参的个数及类型,来进行不同操作.但是,我认为这不能叫做重载. ES6带来了
ES6知识点整理之Proxy的应用实例详解

本文实例讲述了ES6知识点整理之Proxy的应用.分享给大家供大家参考,具体如下: Proxy 用于修改对象某些操作的默认行为,可以对外界的访问进行过滤和改写,其概念类似于元编程. Proxy 让我们可以对任何对象的绝大部分行为进行监听和干涉,实现更多的自定义程序行为.在目标对象之前架设一层"拦截",外界对该对象的访问,都必须先通过这层拦截. 目前[兼容性]存在一定的问题,目前在chrome和ff浏览器中的非严格模式下可用,一些先进的技术即使在目前不能广泛应用,但随着时间的流逝,都将会
ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去. Array.prototype.copyWithin(target, start = 0, end = this.length) 该函数有三个参数. target:目的起始位置. start:复制源的起始位置,可以省略,可以是负数. end:复制源的结束位置,可以省略,可以是负数,实际结束位置是end-1. 例: 把第3个元素(从0开始)到第5个元素,复制并覆盖到以第1个位置
ES6新特性六：promise对象实例详解

本文实例讲述了ES6新特性之promise对象.分享给大家供大家参考,具体如下: 1. promise 介绍它是一个对象,也就是说与其他JavaScript对象的用法,没有什么两样:其次,它起到代理作用(proxy),充当异步操作与回调函数之间的中介.它使得异步操作具备同步操作的接口,使得程序具备正常的同步运行的流程,回调函数不必再一层层嵌套. 它的思想是,每一个异步任务立刻返回一个Promise对象,由于是立刻返回,所以可以采用同步操作的流程.这个Promises对象有一个then方法,允许
ES6新特性之函数的扩展实例详解

本文实例讲述了ES6新特性之函数的扩展.分享给大家供大家参考,具体如下: 一.函数参数默认值 1. ES6允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello 这种写法有两个好处:首先,阅读代码的人,可以立刻意识
ES6中Math对象新增的方法实例详解

本文实例讲述了ES6中Math对象新增的方法.分享给大家供大家参考,具体如下: Math.trunc() Math.trunc方法用于去除一个数的小数部分,返回整数部分. 对于没有部署这个方法的环境,可以用下面的代码模拟. Math.trunc = Math.trunc || function(x) { return x < 0 ? Math.ceil(x) : Math.floor(x); }; Math.sign() Math.sign方法用来判断一个数到底是正数.负数.还是零. 对于没有部
ES6 javascript中Class类继承用法实例详解

本文实例讲述了ES6 javascript中Class类继承用法.分享给大家供大家参考,具体如下: 1. 基本用法 Class 之间可以通过extends关键字实现继承, 这比 ES5 的通过修改原型链实现继承, 要清晰和方便很多. class ColorPoint extends Point {} 上面代码定义了一个ColorPoint类, 该类通过extends关键字, 继承了Point类的所有属性和方法. 但是由于没有部署任何代码, 所以这两个类完全一样, 等于复制了一个Point类. 下
ES6知识点整理之String字符串新增常用方法示例

本文实例讲述了ES6知识点整理之String字符串新增常用方法.分享给大家供大家参考,具体如下: 字符串includes,startsWith,endsWith方法测试普通的用法: <script> var str = 'Hello'; console.log(str.indexOf('o')); // 4 console.log(str.includes('e')); // true console.log(str.startsWith('H')); // true console.log
ES6知识点整理之函数数组参数的默认值及其解构应用示例

本文实例讲述了ES6知识点整理之函数数组参数的默认值及其解构应用.分享给大家供大家参考,具体如下: 在ES6中, 函数的参数也可以使用解构赋值和默认值的设置,下面我们来看下在ES6之前设置函数默认值的写法 function test(x,y) { x = x || 12; y = y || 22; console.log(x,y); } test(); // 12 22 test(1,2) // 1 2 在ES6中给函数参数赋默认值 function test(x=12, y=22) { co
ES6知识点整理之对象解构赋值应用示例

本文实例讲述了ES6知识点整理之对象解构赋值应用.分享给大家供大家参考,具体如下: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring), 在对象的解构赋值中有一些需要注意的事项初识对象的解构 var {name} = { name:'Joh', age:10 }; console.log(name); // Joh 通过解构的形式取出对象中的属性值对解构出的属性进行重命名 var {name} = { name:'Joh', age:1
ES6知识点整理之数组解构和字符串解构的应用示例

本文实例讲述了ES6知识点整理之数组解构和字符串解构的应用.分享给大家供大家参考,具体如下: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring), 而数组的解构赋值是从数组中提取值,按照对应位置,对变量赋值. ES6之前的赋值操作 var arr = [1,2,3]; var a = arr[0]; var b = arr[1]; var c = arr[2]; console.log(a,b,c); // 1 2 3 对一维数组的解构赋值

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

相关推荐

随机推荐