ES6系列之Proxy

目录

ES6之Proxy

它是什么

proxy使用格式

proxy入门示例

理解代理的作用

代理对象与原对象的关系

代理列表 

get() 代理的应用

允许数组下标是负值

链式运算 

this指向问题 

---

ES6之Proxy

proxy的中文有代理的意思。在其他的程序设计语言中这个单词也具有类似的含义。

它是什么

---

Proxy是一个构造器。Proxy在目标对象的外层搭建了一层拦截，外界对目标对象的某些操作，必须通过这层拦截。在 js 中构造器的典型特点就是首字母大写，我们通过new Proxy(原对象,{代理列表})格式去创建对象,创建的这个对象我们称之为代理对象。 即：

代理对象 = new Proxy(原对象,{代理列表})

之所以要额外产生这么一个代理对象，好处在于可以保持原对象不变，在代理对象中添加新的功能，或者是改造某些功能。而这个原对象则可以在适当的时机回滚回去。可以与设计模式中的代理模式对比理解。

proxy使用格式

---

var obj;
var proxyObj = new Proxy(obj, {
    对obj的操作1: 函数1，
    对obj的操作2: 函数2，
    ...
    
})

obj 参数表示所要拦截的目标对象，{} 参数是一个对象，用来定制拦截行为

proxy入门示例

---

var obj = {name:'fan',age:34}
console.info(obj.name)
 

var proxyObj = new Proxy(obj,{
    get:function(target,key,receiver){console.info(target,key,receiver); return 'no'} 
})

console.info(proxyObj.name)
console.info(proxyObj.abc)

proxyObj.name    // no
proxyObj.abc    // no

解释如下：

• proxxy对象是在obj对象的基础之上创建的一个新对象。
• proxyObj.name是要去获取proxy对象的name属性。.操作符会自动去调用get()方法。这一点非常重要当然。我们平时使用.操作时，是没有感知到这一点的。
• 在new Proxy的第二个参数中，明确设置了get的方法：当访问proxyObj的任意属性时，输出target,key,receiver的值，并统一返回no。所以proxyObj.name和proxyObj.abc都会得到no。
• get函数中的三个参数：target,key,receiver。 target就是原对象obj, key是当前的属性名；receiver是代理对象。你可以在get方法中做任意的自定