详解es6中Proxy代理对象的作用

时间:2022-09-14 22:46:26

在es6中新添加了Proxy,那么它有什么作用啊?Proxy本意为代理,而es6中的Proxy也就是代理对象,那么代理对象感觉听起来很模糊,在这里就解释一下Proxy代理对象的作用。

Proxy的主要作用就是可以对 对象进行拦截,以及对数据读取、修改的过滤保护。

我们先利用es3的方式来实现一个需求,现有一数据,内部有name、age、sex三个属性,name、age属性可读可写,但是sex属性只可读,不可写

分析步骤:

我们可以定义一个构造函数,内部定义一个data数据,包含这三个属性

我们还要暴露两个方法,一个get,一个set

get用来读数据,set用来写数据,在写数据的时候判断,如果想设置sex这个属性,我们就给错误提示

 var Person = function(){
var data = {
name:'monkey',
age:18,
sex:'男'
}
this.get = function(key){
console.log(key)
return data[key]
}
this.set = function(key,value){
if(key!=='sex'){
return data[key] = value
}else{
throw '该属性为只读属性'
}
}
}
var person = new Person;
var name = person.get('name')
person.set('sex','女')
console.log(person.get('sex'))

  

最终输出结果:
详解es6中Proxy代理对象的作用

我们就实现了,name可读可写,sex却不能修改

然后我们再利用es5的方式来实现,es5知道defineProperty这个方法的实现就简单很多了

var person = {
name:'monkey',
age:30
}
Object.defineProperty(person,'sex',{
writable:false,
value:'男'
})
person.sex = '女'
console.log(person.sex)

  

我们通过defineProperty设置sex属性为不可写属性

详解es6中Proxy代理对象的作用
我们会发现最终结果还是男并没有修改成功

接下来我们就再利用es6的Proxy来实现

var person = {
name:'monkey',
age:19,
sex:'男'
}
var p1 = new Proxy(person,{
get(target,key){
console.log(target)
console.log(key)
return target[key]
},
set(target,key,value){
if(key=='sex'){
throw '不允许修改sex'
}else{
target[key] = value
}
}
})
p1.name
p1.sex = '女'

  

我们来分析下上面的代码,

定义了一个person数据

通过new Proxy得到代理对象p1

Proxy第一个参数为要拦截的对象,第二个参数为对象,对象内部有get和set方法

get方法是通过p1读数据的时候会调用,get方法有两个参数,target为目标数据也就是person,key就是通过p1读数据时候的key
例如上面代码20行读取数据了,就会触发get方法结果如下

set方法就是当通过p1设置数据的时候会触发,内部有三个形参,第一个还是target,第二个还是key,第三个为value也就是设置的值

那么我们就可以通过key来判断,如果key为sex就代表你要设置sex就给错误提示

否则就通过target[key] = value给设置数据

以上就是Proxy的使用方法了,相对es3和es5而言Proxy感觉还是很好的,因为可以在set里面做更多逻辑的处理等等

详解es6中Proxy代理对象的作用的更多相关文章

  1. 详解javascript中的this对象

    详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...

  2. [译]ES6中的代理对象

    原文:http://ariya.ofilabs.com/2013/07/es6-and-proxy.html 能够拦截在一个对象上的指定操作的能力是非常有用的,尤其是在故障调试的时候.通过ECMASc ...

  3. 详解HTML中的window对象和document对象

    Window -- 代表浏览器中一个打开的窗口: 对象属性 window //窗口自身 window.self //引用本窗户window=window.self window.name //为窗口命 ...

  4. 详解Javascript中的Array对象

    基础介绍 创建数组 和Object对象一样,创建Array也有2种方式:构造函数.字面量法. 构造函数创建 使用构造函数的方式可以通过new关键字来声明,如下所示: 12 var arr = new ...

  5. 详解JavaScript中的Object对象

    Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是 ...

  6. 详解ES6中的 let 和const

      前  言 JRedu ECMAScript 6 是 JavaScript 语言教程,全面介绍 ECMAScript 6 新引入的语法特性. ES6 与上一个版本 ES5 的所有不同之处,对涉及的语 ...

  7. 详解Threejs中的光源对象

    光源的分类 AmbientLight(环境光),PointLight(点光源),SpotLight(聚光源) 和 DirectionalLight(平行光)是基础光源 HemisphereLight( ...

  8. 详解 Java 中的三种代理模式

    代理模式 代理(Proxy)是一种设计模式,提供了对目标对象另外的访问方式;即通过代理对象访问目标对象.这样做的好处是:可以在目标对象实现的基础上,增强额外的功能操作,即扩展目标对象的功能. 这里使用 ...

  9. 详解CorelDRAW中如何合并与拆分对象

    合并两个或多个对象可以创建带有共同填充和轮廓属性的单个对象,以便将这些对象转换为单个曲线对象.可以合并的对象包括矩形.椭圆形.多边形.星形.螺纹.图形或文本等,本教程将详解CorelDRAW中关于合并 ...

随机推荐

  1. Objective-C中的类目,延展,协议

    Objective-C中的类目(Category),延展(Extension),协议(Protocol)这些名词看起来挺牛的,瞬间感觉OC好高大上.在其他OOP语言中就没见过这些名词,刚看到这三个名词 ...

  2. docker 使用非加密registry

    配置docker成为服务,自启动 sudo systemctl enable docker.service 启动服务 sudo systemctl start docker docker默认要求我们使 ...

  3. arguments.callee的用法

    argument为函数内部对象,包含传入函数的所有参数,arguments.callee代表函数名,多用于递归调用,防止函数执行与函数名紧紧耦合的现象,对于没有函数名的匿名函数也非常起作用.举例如下: ...

  4. JavaScript Patterns 6.7 Borrowing Methods

    Scenario You want to use just the methods you like, without inheriting all the other methods that yo ...

  5. SVM3 Soft Margin SVM

    之前分为两部分讨论过SVM.第一部分讨论了线性SVM,并且针对线性不可分的数据,把原始的问题转化为对偶的SVM求解.http://www.cnblogs.com/futurehau/p/6143178 ...

  6. Linux c实现服务端与客户端聊天

    主要利用socket通信实现,具体代码如下 客户端: #include <stdio.h> #include <stdlib.h> #include <string.h& ...

  7. lib-qqwry v1&period;0 发布 nodejs解析纯真IP库&lpar;qqwry&period;dat&rpar;

    lib-qqwry是当初学习node时用来练手的一个模块,用来解析纯真IP库的 现在发一个v1.0版本弥补我当时稚嫩的代码. 意外收获是,整理代码后发现,相比v0.x版本 急速模式下的效率提升大概20 ...

  8. MYSQL BENCHMARK函数的使用

    MYSQL BENCHMARK函数是最重要的函数之一,下文对该函数的使用进行了详尽的分析,如果您对此感兴趣的话,不妨一看. 下文为您介绍的是MYSQL BENCHMARK函数的语法,及一些MYSQL  ...

  9. POJ 1182 食物链&lpar;种类并查集&rpar;

    记得第一次做这道题的时候,推关系感觉有点复杂,而且写完代码后一直WA,始终找不出错误. 在A了十几道并查集后,再做这道题,发现太小儿科了.发现原来之所以WA,就在于查找根节点时,没有同步更新子节点相对 ...

  10. ARCGIS获取图层下的要素信息及要素类转换为要素

    /// <summary> /// 得到需要的字段名和字段值 /// </summary> /// <param name="layer">&l ...