Js中Proxy對象

Proxy對象用於定義基本操作的自定義行為，例如屬性查找、賦值、枚舉、函數調用等。

語法

const proxy = new Proxy(target, handler);

• target: 要使用Proxy包裝的目標對象，可以是任何類型的對象，包括原生數組，函數，甚至另一個代理。
• handler: 一個通常以函數作為屬性的對象，各屬性中的函數分別定義了在執行各種操作時代理proxy的行為。

描述

Proxy用於修改某些操作的默認行為，也可以理解為在目標對象之前架設一層攔截，外部所有的訪問都必須先通過這層攔截，因此提供了一種機制，可以對外部的訪問進行過濾和修改。這個詞的原理為代理，在這里可以表示由它來代理某些操作，譯為代理器。

var target = {a: 1};
var proxy = new Proxy(target, {
    set: function(target, key, value, receiver){ 
        console.log("watch");
        return Reflect.set(target, key, value, receiver);
    },
    get: function(target, key, receiver){ 
        return target[key];
    }
});
proxy.a = 11; // watch
console.log(target); // {a: 11}

Object.defineProperty是用於監聽屬性，而Proxy是監聽整個對象，通過調用new Proxy()，可以創建一個代理用來替代另一個對象被稱為目標，這個代理對目標對象進行了虛擬，因此該代理與該目標對象表面上可以被當作同一個對象來對待。代理允許攔截在目標對象上的底層操作，而這原本是Js引擎的內部能力，攔截行為使用了一個能夠響應特定操作的函數，即通過Proxy去對一個對象進行代理之后，我們將得到一個和被代理對象幾乎完全一樣的對象，並且可以從底層實現對這個對象進行完全的監控。

// 常見的一道面試題 實現 a===1&&a===2&&a===3 為true

// Object.defineProperty 定義的是屬性
// 可以實現對於題目的要求
var  _a = 0;
Object.defineProperty(window, "a", {
    get:function(){
        return ++_a;
    }
})
console.log(a===1 && a===2 && a===3); // true

// proxy 代理的是對象 
// 因此在調用時實際與題目要求並不太相符
// 但同樣也是一種實現方式
var _a = 0;
var proxy = new Proxy(window, {
    set: function(target, key, value, receiver){ 
        return Reflect.set(target, key, value, receiver);
    },
    get: function(target, key, receiver){
        if(key === "a") return ++_a;
        else return window[key];
    }
});
console.log(proxy.a===1 && proxy.a===2 && proxy.a===3); //true

方法

Proxy.revocable()

Proxy.revocable(target, handler)
Proxy.revocable()方法可以用來創建一個可撤銷的代理對象，其返回一個包含了代理對象本身和它的撤銷方法的可撤銷Proxy對象。

• target: 將用Proxy封裝的目標對象，可以是任何類型的對象，包括原生數組，函數，甚至可以是另外一個代理對象。
• handler: 一個對象，其屬性是一批可選的函數，這些函數定義了對應的操作被執行時代理的行為。

該方法的返回值是一個對象，其結構為{"proxy": proxy, "revoke": revoke}，一旦某個代理對象被撤銷，它將變得幾乎完全不可調用，在它身上執行任何的可代理操作都會拋出TypeError異常，注意可代理操作一共有14種，執行這14種操作以外的操作不會拋出異常。一旦被撤銷，這個代理對象便不可能被直接恢復到原來的狀態，同時和它關聯的目標對象以及處理器對象都有可能被垃圾回收掉。再次調用撤銷方法revoke()則不會有任何效果，但也不會報錯。

var revocable = Proxy.revocable({}, {
  get: function(target, key) {
    return `[[ ${key} ]]`;
  }
});
var proxy = revocable.proxy;
console.log(proxy.example); // [[ example ]]
revocable.revoke();
// console.log(proxy.example);  // 拋出 TypeError
// proxy.example = 1;           // 拋出 TypeError
// delete proxy.example;        // 拋出 TypeError
// typeof proxy                 // "object"，因為 typeof 不屬於可代理操作

handler對象方法

handler對象是一個容納一批特定屬性的占位符對象，它包含有Proxy的各個捕獲器trap。所有的捕捉器是可選的，如果沒有定義某個捕捉器，那么就會保留源對象的默認行為。

• handler.getPrototypeOf(): Object.getPrototypeOf方法的捕捉器。
• handler.setPrototypeOf(): Object.setPrototypeOf方法的捕捉器。
• handler.isExtensible(): Object.isExtensible方法的捕捉器。
• handler.preventExtensions(): Object.preventExtensions方法的捕捉器。
• handler.getOwnPropertyDescriptor(): Object.getOwnPropertyDescriptor方法的捕捉器。
• handler.defineProperty(): Object.defineProperty方法的捕捉器。
• handler.has(): in操作符的捕捉器。
• handler.get(): 屬性讀取操作的捕捉器。
• handler.set(): 屬性設置操作的捕捉器。
• handler.deleteProperty(): delete操作符的捕捉器。
• handler.ownKeys(): Reflect.ownKeys、Object.getOwnPropertyNames、Object.keys、Object.getOwnPropertySymbols方法的捕捉器。
• handler.apply(): 函數調用操作的捕捉器。
• handler.construct(): new操作符的捕捉器。

var target = {
    a: 1,
    f: function(...args){
        console.log(...args);
    }
};
var proxy = new Proxy(target, {
    getPrototypeOf: function(target) {
        console.log("getPrototypeOf");
        return Object.getPrototypeOf(target);
    },
    setPrototypeOf: function(target, prototype) {
        console.log("setPrototypeOf");
        return Object.setPrototypeOf(target, prototype);
    },        
    isExtensible: function(target) {
        console.log("isExtensible");
        return Object.isExtensible(target);
    },
    preventExtensions: function(target) {
        console.log("preventExtensions");
        return Object.preventExtensions(target);
    },
    getOwnPropertyDescriptor: function(target, prop) {
        console.log("getOwnPropertyDescriptor");
        return Object.getOwnPropertyDescriptor(target, prop);
    },
    defineProperty: function(target, prop, descriptor) {
        console.log("defineProperty");
        return Object.defineProperty(target, prop, descriptor);
    },
    has: function(target, prop) {
        console.log("has");
        return prop in target;
    },
    get: function(target, prop, receiver) {
        console.log("get");
        return target[prop];
    },
    set: function(target, prop, value, receiver) {
        console.log("set");
        target[prop] = value;
        return true;
    },
    deleteProperty: function(target, property) {
        console.log("deleteProperty");
        delete target[property];
        return true;
    },
    ownKeys: function(target) {
        console.log("ownKeys");
        return Reflect.ownKeys(target);
    }
})


var proxyF = new Proxy(target.f, {
    construct: function(target, argumentsList, newTarget) {
        console.log("construct");
        return new target(...argumentsList);
    },
    apply: function(target, thisArg, argumentsList) {
        console.log("apply");
        return target.apply(thisArg, argumentsList);
    },

})

const _prototype = {test: 1};
Object.setPrototypeOf(proxy, _prototype); // setPrototypeOf
console.log(Object.getPrototypeOf(proxy)); // getPrototypeOf // { test: 1 }

Object.preventExtensions(proxy); // preventExtensions
console.log(Object.isExtensible(proxy)); // isExtensible // false

Object.defineProperty(proxy, "a", {configurable: true}); // defineProperty
console.log(Object.getOwnPropertyDescriptor(proxy, "a")); // getOwnPropertyDescriptor // { value: 1, writable: true, enumerable: true, configurable: true }

proxy.a = 11; // set
console.log(proxy.a); // get // 11

console.log(Object.keys(proxy)); // ownKeys getOwnPropertyDescriptor getOwnPropertyDescriptor // [ 'a', 'f' ]
delete proxy.a; // deleteProperty
console.log("a" in proxy); // has // false

proxyF(1, 2, 3); // apply 1 2 3
new proxyF(1, 2, 3); // construct 1 2 3

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://juejin.im/post/6844903853867925517
https://www.cnblogs.com/kdcg/p/9145385.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy