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

巴特西

ES 6 系列 - Proxy

1.概述

二、支持的拦截操作

最新文章

热门文章