1 概述

Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。

Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。

ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

Proxy 对象的所有用法,都是上面这种形式,不同的只是handler参数的写法。其中,new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。

作为构造函数,Proxy接受两个参数。第一个参数是所要代理的目标对象(上例是一个空对象),即如果没有Proxy的介入,操作原来要访问的就是这个对象;

第二个参数是一个配置对象,对于每一个被代理的操作,需要提供一个对应的处理函数,该函数将拦截对应的操作

         var obj={name:'Jane',age:12}
var proxy = new Proxy(obj, {
get: function(target, property) {
console.log(target)//{name:"Jane",age:12}(接受的obj参数)
console.log(property)//对象的属性
return target[property];//返回对象该属性的值
}
}); console.log(proxy.age) //
console.log(proxy.name) // Jane

这是当前Proxy实例函数的输出

上面的例子相当于没有对对象进行处理

      var proxy=new Proxy({},{
get:function(target,property){
return 'haha'
}
})
console.log(proxy.name);//haha
console.log(proxy.age);//haha
console.log(proxy.title);//haha

这是当前Proxy实例函数的输出

在这个例子中,传入的对象为空对象,直接返回‘haha’,所以在外部调用的时候,不管什么属性,输出的都是haha

一个技巧是将 Proxy 对象,设置到object.proxy属性,从而可以在object对象上调用。

var object = { proxy: new Proxy(target, handler) };
       var target={name:'Jane',age:15}
var obj={proxy:new Proxy(target,{
get:function(target,property){
return target[property]+"6";
}
})}
console.log(obj.proxy.name)//Jane6
console.log(obj.proxy.age)//

Proxy 实例也可以作为其他对象的原型对象

      var proxy=new Proxy({},{
get:function(target,property){
return 35;
}
})
let obj = Object.create(proxy);
console.log(obj.name);//
console.log(obj);

同一个拦截器函数,可以设置拦截多个操作。

        var handler = {
get: function(target, name) {
if (name === 'prototype') {
return Object.prototype;
}
return 'Hello, ' + name;
},
apply: function(target, thisBinding, args) {
//console.log(args)//[1,2]
return args[0];
},
construct: function(target, args) {
//console.log(args)//[1,2]
return {value: args[1]};
}
};
var fproxy = new Proxy(function(x, y) {
return x + y;
}, handler);
//fproxy(1, 2) // 1 apply()
//new fproxy(1, 2) // {value: 2} construct()
//fproxy.prototype === Object.prototype // true 二者的原型对象均指向constructor
fproxy.foo === "Hello, foo" // true get()

对于可以设置、但没有设置拦截的操作,则直接落在目标对象上,按照原先的方式产生结果。

下面是 Proxy 支持的拦截操作一览,一共 13 种。

  • get(target, propKey, receiver):拦截对象属性的读取,比如proxy.fooproxy['foo']
  • set(target, propKey, value, receiver):拦截对象属性的设置,比如proxy.foo = vproxy['foo'] = v,返回一个布尔值。
  • has(target, propKey):拦截propKey in proxy的操作,返回一个布尔值。
  • deleteProperty(target, propKey):拦截delete proxy[propKey]的操作,返回一个布尔值。
  • ownKeys(target):拦截Object.getOwnPropertyNames(proxy)Object.getOwnPropertySymbols(proxy)Object.keys(proxy),返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
  • getOwnPropertyDescriptor(target, propKey):拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。
  • defineProperty(target, propKey, propDesc):拦截Object.defineProperty(proxy, propKey, propDesc)Object.defineProperties(proxy, propDescs),返回一个布尔值。
  • preventExtensions(target):拦截Object.preventExtensions(proxy),返回一个布尔值。
  • getPrototypeOf(target):拦截Object.getPrototypeOf(proxy),返回一个对象。
  • isExtensible(target):拦截Object.isExtensible(proxy),返回一个布尔值。
  • setPrototypeOf(target, proto):拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。
  • apply(target, object, args):拦截 Proxy 实例作为函数调用的操作,比如proxy(...args)proxy.call(object, ...args)proxy.apply(...)
  • construct(target, args):拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(...args)

 

ES6中的proxy的更多相关文章

  1. 利用ES6中的Proxy和Reflect 实现简单的双向数据绑定

    利用ES6中的Proxy (代理) 和 Reflect 实现一个简单的双向数据绑定demo. 好像vue3也把 obj.defineProperty()  换成了Proxy+Reflect. 话不多说 ...

  2. es6中的Proxy和vue中的数据代理的异同

    1:概述 1-1:Proxy 用于修改某些操作的默认行为,Proxy可以说在对对象进行各种访问或者操作的时候在外层进行一层拦截,在操作之前都需要经过这种拦截.proxy返回的是一个新对象,可以通过操作 ...

  3. 浅谈ES6中的Proxy

    Proxy是一个很有趣的对象,它能够修改某些操作的默认行为,等同于在语言层面做出修改,属于一种‘元编程’,即对编程语言进行编程. Proxy其实很好理解,就是在目标对象之前架设一层拦截,外界的访问都得 ...

  4. ES6中的元编程-Proxy & Reflect

    前言 ES6已经出来好久了,但是工作中比较常用的只有let const声明,通过箭头函数改this指向,使用promise + async 解决异步编程,还有些数据类型方法...所以单独写一篇文章学习 ...

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

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

  6. es6学习笔记-proxy对象

    前提摘要 尤大大的vue3.0即将到来,虽然学不动了,但是还要学的啊,据说vue3.0是基于proxy来进行对值进行拦截并操作,所以es6的proxy也是要学习一下的. 一 什么是proxy Prox ...

  7. es6学习笔记-Proxy、Reflect、Promise

    Proxy Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程. Proxy 可以理解成,在目标对象之前 ...

  8. ES6入门之Proxy

    1. 概述 Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种『元编程』即对编程语言进行编程. 1.1 理解 Proxy 是在目标对象之前架设一层『拦截』,外部对对象的访问 ...

  9. ES6中的模板字符串和新XSS Payload

    ES6中的模板字符串和新XSS Payload 众所周知,在XSS的实战对抗中,由于防守方经常会采用各种各样严格的过滤手段来过滤输入,所以我们使用的XSS Payload也会根据实际情况作出各种各样的 ...

随机推荐

  1. equals的使用

    源码:这里只是把Integer拿出来,String,Long 都一样 /** * Compares this object to the specified object. The result is ...

  2. jsp相关笔记(三)

    在往数据库的表中写入数据时,一定要与表中的每一项对应,比如表中有三项,则写入的值也应该是三类: String getTitle=request.getParameter("title&quo ...

  3. mysql启动错误,提示crash 错误

    :: mysqld_safe Starting mysqld daemon with databases from /data/mysql_data -- :: [Note] Plugin 'FEDE ...

  4. URI编码时遇到特殊字符的处理方式

    今天遇到一个问题,在向一个地址发起get请求时,某个参数是这种形式:foo=xx&&yyyy,其中"&&"是参数值的一部分,在调用这个接口时,后台收 ...

  5. JavaScript 高阶函数

    高阶函数的英文叫Higher-order function ,什么是高阶函数呢>? JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接 ...

  6. windows下多tomcat部署

    两种方式: 第一种是修改tomcat下很多配置文件,且配置环境变量: 第二种不配tomcat环境变量,通过修改server.xml文件即可: 本篇讲解第二种方式: 首先说下如何修改tomcat控制台标 ...

  7. (PMP)第13章-----项目相关方管理

    13.1 识别相关方 1 相关方分类的方法: 1.1 权力/利益方格,权力/影响方格,影响/作用方格(小型项目,关系简单) 权力:基于相关方的职权级别: 利益:对项目成果的关心程度 影响:对项目成果的 ...

  8. Hibernate 映射及查询

    实体类和实体之间的关系:一对多,多对多 数据库设计:e_r 一个实体对象就是一个表格,  如果是1对多的关系,将多方的主键拿到1方做外键.  多对多:重新建立一张新的表格,将双方的主键拿到这里做外键 ...

  9. 卷积在深度学习中的作用(转自http://timdettmers.com/2015/03/26/convolution-deep-learning/)

    卷积可能是现在深入学习中最重要的概念.卷积网络和卷积网络将深度学习推向了几乎所有机器学习任务的最前沿.但是,卷积如此强大呢?它是如何工作的?在这篇博客文章中,我将解释卷积并将其与其他概念联系起来,以帮 ...

  10. JDK、JRE、JVM之间的关系

       JDK.JRE.JVM之间的关系 1.JDK下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads ...