ECMAScript 6 之Proxy

查看更多文章: https://alili.tech

Proxy

ES6新增了Proxy,那Proxy是什么呢?

Proxy,翻译是代理的意思.在ES6中,Proxy可以监听对象的修改.

也就是说,外界对这个对象的访问与修改,都可以通过Proxy监听,并且可以做一些别的事情.

举个例子:

var obj={
  a:1
}
var proxyObj =  new Proxy(obj,{ //proxyObj会继承obj
    set:function(){
      alert("我被修改了")
    }
  });

  //修改属性
  proxyObj.a=2; //属性被修改后,之前设置的handler会被触发
  console.log(obj.a) // 2

就这么简单

下面是可以监听的操作

1. get(target, propKey, receiver)

拦截对象属性的读取，比如proxy.foo和proxy[‘foo’]。

2. set(target, propKey, value, receiver)

拦截对象属性的设置，比如proxy.foo = v或proxy[‘foo’] = v，返回一个布尔值。

3. has(target, propKey)

拦截propKey in proxy的操作，以及对象的hasOwnProperty方法，返回一个布尔值。

4. deleteProperty(target, propKey)

拦截delete proxy[propKey]的操作，返回一个布尔值。

5. ownKeys(target)

拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)，返回一个数组。该方法返回对象所有自身的属性，而Object.keys()仅返回对象可遍历的属性。

6. getOwnPropertyDescriptor(target, propKey)

拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。

7. defineProperty(target, propKey, propDesc)

拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。

8. preventExtensions(target)

拦截Object.preventExtensions(proxy)，返回一个布尔值。

9. getPrototypeOf(target)

拦截Object.getPrototypeOf(proxy)，返回一个对象。

10. isExtensible(target)

拦截Object.isExtensible(proxy)，返回一个布尔值。

11. setPrototypeOf(target, proto)

拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。

如果目标对象是函数，那么还有两种额外操作可以拦截。

12. apply(target, object, args)

拦截Proxy实例作为函数调用的操作，比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)。

13. construct(target, args)

拦截Proxy实例作为构造函数调用的操作，比如new proxy(…args)。

---

公众号“ Alili丶前端大爆炸”，关注后提供海量学习资料