ES 6 系列 - Proxy

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以是一种“元编程”，即对编程语言进行编程。

 

简单地理解，就是在目标对象之前假设一层“拦截”，外界对改对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤。基本就想字面意思：代理。

 

1.概述

　　es 6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

 

　　其中，target、handler 均为对象，target 指目标对象(需要拦截的)，handler 中定义拦截行为。

var obj = new Proxy({}, {
  get: function (target, key, receiver) {
    console.log(`getting ${key}!`);    // es 6 新増的字符串拓展写法
    return Reflect.get(target, key, receiver);
  },
  set: function (target, key, value, receiver) {
    console.log(`setting ${key}!`);
    return Reflect.set(target, key, value, receiver);
  }
});


obj.count = 1
//  setting count!
++obj.count
//  getting count!
//  setting count!
//  2

 

二、支持的拦截操作

　　一共有13中拦截操作，具体移步 Proxy 概述 。这里解释 api 中几个参数的含义：

　　　　target : 目标对象，简单来说就是 new Proxy(target, handler) 中的 target 对象；

　　　　propKey : 这个解释起来有点复杂，理解很容易，如上例中的 count 就是 propKey；

　　　　value : 同样拿上例来看，obj.count = 1 ， 那么 value 就是 1;

　　　　receiver : 就是 new 出来的 Proxy 对象本身;

 

　　this 指针的指向变化：

　　　　一旦 proxy 代理了目标对象（target），那么 target 对象中的 this ，就指向了 proxy 对象，而不在指向 target 对象：

const target = {
  m: function () {
    console.log(this === proxy);
  }
};
const handler = {};

const proxy = new Proxy(target, handler);

target.m() // false
proxy.m()  // true