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