关闭

ES6中的代理(Proxy)和反射(Reflection)

时间: 2019-03-21阅读: 767标签: 代理

代理和反射的定义

调用 new Proxy() 可常见代替其它目标 (target) 对象的代理,它虚拟化了目标,所以二者看起来功能一致。

代理可拦截js引擎内部目标的底层对象操作,这些底层操作被拦截后会触发响应特定操作的陷阱函数

反射 API 以 Reflect 对象的形式出现,对象中方法的默认特性与相同的底层操作一致,而代理可以覆写这种操作,每一个代理陷阱对应一个命名和参数都相同的 Reflect 方法。


应用

基础用法

let target = {};
let p = new Proxy(target, {});

p.a = 37;   // 操作转发到目标

console.log(target.a);    // 37. 操作已经被正确地转发

get、set、has、deleteProperty的使用

  • get() 方法用于拦截对象的读取属性操作
  • set() 方法用于拦截设置属性值的操作
  • has() 方法可以看作是针对 in 操作的钩子
  • deleteProperty() 方法用于拦截对对象属性的 delete 操作
let target = {
  name: 'target',
  color: 'blue',
  size: 50,
  skill: 'drink'
}
let proxy = new Proxy(target, {
  set: function(trapTarget, key, value, receiver) {
    // 忽略不希望受到影响的已有属性
    if(!trapTarget.hasOwnProperty(key)) {
      if(isNaN(value)) {
        throw new TypeError('属性必须是数字!')
      }
    }
    //添加属性
    return Reflect.set(trapTarget, key, value, receiver)
  },

  get: function(trapTarget, key, receiver) {
    if(!(key in receiver)) {
      throw new TypeError(key + '属性不存在!')
    }

    return Reflect.get(trapTarget, key, receiver)
  },

  has: function(trapTarget, key) {
    if(key === 'color') {
      return false
    }else {
      return Reflect.has(trapTarget, key)
    }
  },

  deleteProperty: function(trapTarget, key) {
    if(key === 'skill') {
      return false
    }else {
      return Reflect.deleteProperty(trapTarget, key)
    }
  }

});

//添加一个新属性
proxy.count = 1
console.log(target.count) //1
proxy.name = 'proxy'
console.log(proxy.name) //proxy
console.log(target.name) //proxy
proxy.anotherName = 'proxy' //抛出错误: 属性必须是数字!

console.log(proxy.age) //抛出错误:age属性不存在!

console.log('name' in proxy) //true
console.log('color' in proxy)  //false


console.log('size' in proxy) //true
let result1 = delete proxy.size
console.log('size' in proxy) //false

console.log('skill' in proxy) //true
let result2 = delete proxy.skill
console.log('skill' in proxy) //true


参考

《深入理解ES6》

来自:https://segmentfault.com/a/1190000018604077


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2459

关闭

如何使用Proxy 来代理Js中的类?

Proxy 对象(Proxy)是 ES6 的一个非常酷却鲜为人知的特性。虽然这个特性存在已久,但是我还是想在本文中对其稍作解释,并用一个例子说明一下它的用法。

NodeJS中配置请求代理服务器

大佬让我换个机器重新装一下,但是因为我的里面用到了一个图片处理库 sharp 装起来很烦,然后就研究研究能不能搞个代理服务器。

Vue多环境代理配置

多人协作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了vue.config.js文件后提交了。第一,很容易引起冲突。 第二,很容易出现代理错误,需要排查。而且现在微服务盛行

反向代理和内网穿透

反向代理看上去看深奥,其实不然,只是因为汉语言文化的差异导致它看上去深奥。一般反派感觉都比较厉害和神秘。要理解反向代理,我们就不得不说一下正向代理。正向代理代理的对象是客户端;反向代理代理的对象是服务端

Proxy代理

在一个系统中,总要存储一些数据,对于这些数据,可能有一些是希望我们访问的,但是总有一些是中重要的,不希望我们访问的,希望保护起来,因此ES6新增了代理,在目标对象前架设个拦截层

node.js代理访问

本地开发,代理访问,防止跨域(一般通过webpack配置代理即可),特殊情况如携带一些自定义的登录cookie则需要通过自己写node,作为一种server中间层,单线程异步可以缓解服务器压力

通过nginx反向代理来调试代码

现在公司项目都是前后端分离的方式开发,有些时候由于某些新需求开发或者 bug 修改,想要让前端直接连到我本地开发环境进行调试,而前端代码我并没有,只能通过前端部署的测试环境进行测试

node怎么做反向代理?

在实际工程开发中,会有前后端分离的需求。使用node.js反向代理的目的:实现前后端分离,前端减少路径请求的所需的路由文件。

centos7下搭建高匿HTTP代理

一般适用情况:1、两台都有外网IP,一台服务器请求资源通过另外一个服务器,本文重点讲第一种。2、两台服务器,其中一台服务器只有内网IP,另外一台服务器有公网和内网IP。

Nginx反向代理之动静分离

我们已经知道了什么是正向代理与反向代理,这次我们就讲一下Nginx的动静分离的案例,其实质运用的就是反向代理,专门用一台服务器代理服务器上的图片资源。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!