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

 

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