[譯] 使用 Proxy 來監測 Javascript 中的類

SHERlocked93發表於2019-03-04
JavaScript

[譯] 使用 Proxy 來監測 Javascript 中的類

Photo by Fabian Grohs on Unsplash

Proxy 物件（Proxy）是 ES6 的一個非常酷卻鮮為人知的特性。雖然這個特性存在已久，但是我還是想在本文中對其稍作解釋，並用一個例子說明一下它的用法。

什麼是 Proxy

正如 MDN 上簡單而枯燥的定義：

Proxy 物件用於定義基本操作的自定義行為（如屬性查詢，賦值，列舉，函式呼叫等）。

雖然這是一個不錯的總結，但是我卻並沒有從中搞清楚 Proxy 能做什麼，以及它能幫我們實現什麼。

首先，Proxy 的概念來源於超程式設計。簡單的說，超程式設計是允許我們執行我們編寫的應用程式（或核心）程式碼的程式碼。例如，臭名昭著的 eval 函式允許我們將字串程式碼當做可執行程式碼來執行，它是就屬於超程式設計領域。

Proxy API 允許我們在物件和其消費實體中建立中間層，這種特性為我們提供了控制該物件的能力，比如可以決定怎樣去進行它的 get 和 set，甚至可以自定義當訪問這個物件上不存在的屬性的時候我們可以做些什麼。

Proxy 的 API

var p = new Proxy(target, handler);
複製程式碼

Proxy 建構函式獲取一個 target 物件，和一個用來攔截 target 物件不同行為的 handler 物件。你可以設定下面這些攔截項：

  • has — 攔截 in 操作。比如，你可以用它來隱藏物件上某些屬性。
  • get — 用來攔截讀取操作。比如當試圖讀取不存在的屬性時，你可以用它來返回預設值。
  • set — 用來攔截賦值操作。比如給屬性賦值的時候你可以增加驗證的邏輯，如果驗證不通過可以丟擲錯誤。
  • apply — 用來攔截函式呼叫操作。比如，你可以把所有的函式呼叫都包裹在 try/catch 語句塊中。

這只是一部分攔截項，你可以在 MDN 上找到完整的列表。

下面是將 Proxy 用在驗證上的一個簡單的例子：

const Car = {
  maker: 'BMW',
  year: 2018,
};

const proxyCar = new Proxy(Car, {
  set(obj, prop, value) {
    if (prop === 'maker' && value.length < 1) {
      throw new Error('Invalid maker');
    }

    if (prop === 'year' && typeof value !== 'number') {
      throw new Error('Invalid year');
    }
    obj[prop] = value;
    return true;
  }

});

proxyCar.maker = ''; // throw exception
proxyCar.year = '1999'; // throw exception
複製程式碼

可以看到，我們可以用 Proxy 來驗證賦給被代理物件的值。

使用 Proxy 來除錯

為了在實踐中展示 Proxy 的能力，我建立了一個簡單的監測庫，用來監測給定的物件或類，監測項如下：

  • 函式執行時間
  • 函式的呼叫者或屬性的訪問者
  • 統計每個函式或屬性的被訪問次數。

這是通過在訪問任意物件、類、甚至是函式時，呼叫一個名為 proxyTrack 的函式來完成的。

如果你希望監測是誰給一個物件的屬性賦的值，或者一個函式執行了多久、執行了多少次、誰執行的，這個庫將非常有用。我知道可能還有其他更好的工具來實現上面的功能，但是在這裡我建立這個庫就是為了用一用這個 API。

使用 proxyTrack

首先，我們看看怎麼用：

function MyClass() {}

MyClass.prototype = {
    isPrime: function() {
        const num = this.num;
        for(var i = 2; i < num; i++)
            if(num % i === 0) return false;
        return num !== 1 && num !== 0;
    },

    num: null,
};

MyClass.prototype.constructor = MyClass;

const trackedClass = proxyTrack(MyClass);

function start() {
    const my = new trackedClass();
    my.num = 573723653;
    if (!my.isPrime()) {
        return `${my.num} is not prime`;
    }
}

function main() {
    start();
}

main();
複製程式碼

如果我們執行這段程式碼，控制檯將會輸出：

MyClass.num is being set by start for the 1 time
MyClass.num is being get by isPrime for the 1 time
MyClass.isPrime was called by start for the 1 time and took 0 mils.
MyClass.num is being get by start for the 2 time
複製程式碼

proxyTrack 接受 2 個引數：第一個是要監測的物件/類，第二個是一個配置項物件，如果沒傳遞的話將被置為預設值。我們看看這個配置項預設值長啥樣：

const defaultOptions = {
    trackFunctions: true,
    trackProps: true,
    trackTime: true,
    trackCaller: true,
    trackCount: true,
    stdout: null,
    filter: null,
};
複製程式碼

可以看到，你可以通過配置你關心的監測項來監測你的目標。比如你希望將結果輸出出來，那麼你可以將 console.log 賦給 stdout。

還可以通過賦給 filter 的回撥函式來自定義地控制輸出哪些資訊。你將會得到一個包括有監測資訊的物件，並且如果你希望保留這個資訊就返回 true，反之返回 false。

在 React 中使用 proxyTrack

因為 React 的元件實際上也是類，所以你可以通過 proxyTrack 來實時監控它。比如：

class MyComponent extends Component{...}

export default connect(mapStateToProps)(proxyTrack(MyComponent, {
    trackFunctions: true,
    trackProps: true,
    trackTime: true,
    trackCaller: true,
    trackCount: true,
    filter: (data) => {
        if( data.type === 'get' && data.prop === 'componentDidUpdate') return false;
        return true;
    }
}));
複製程式碼

可以看到，你可以將你不關心的資訊過濾掉，否則輸出將會變得雜亂無章。

實現 proxyTrack

我們來看看 proxyTrack 的實現。

首先是這個函式本身：

export function proxyTrack(entity, options = defaultOptions) {
    if (typeof entity === 'function') return trackClass(entity, options);
    return trackObject(entity, options);
}
複製程式碼

沒什麼特別的嘛，這裡只是呼叫相關函式。

再看看 trackObject：

function trackObject(obj, options = {}) {
    const { trackFunctions, trackProps } = options;

    let resultObj = obj;
    if (trackFunctions) {
        proxyFunctions(resultObj, options);
    }
    if (trackProps) {
        resultObj = new Proxy(resultObj, {
            get: trackPropertyGet(options),
            set: trackPropertySet(options),
        });
    }
    return resultObj;
}
function proxyFunctions(trackedEntity, options) {
    if (typeof trackedEntity === 'function') return;
    Object.getOwnPropertyNames(trackedEntity).forEach((name) => {
        if (typeof trackedEntity[name] === 'function') {
            trackedEntity[name] = new Proxy(trackedEntity[name], {
                apply: trackFunctionCall(options),
            });
        }
    });
}
複製程式碼

可以看到，假如我們希望監測物件的屬性，我們建立了一個帶有 get 和 set 攔截器的被監測物件。下面是 set 攔截器的實現：

function trackPropertySet(options = {}) {
    return function set(target, prop, value, receiver) {
        const { trackCaller, trackCount, stdout, filter } = options;
        const error = trackCaller && new Error();
        const caller = getCaller(error);
        const contextName = target.constructor.name === 'Object' ? '' : `${target.constructor.name}.`;
        const name = `${contextName}${prop}`;
        const hashKey = `set_${name}`;
        if (trackCount) {
            if (!callerMap[hashKey]) {
                callerMap[hashKey] = 1;
            } else {
                callerMap[hashKey]++;
            }
        }
        let output = `${name} is being set`;
        if (trackCaller) {
            output += ` by ${caller.name}`;
        }
        if (trackCount) {
            output += ` for the ${callerMap[hashKey]} time`;
        }
        let canReport = true;
        if (filter) {
            canReport = filter({
                type: 'get',
                prop,
                name,
                caller,
                count: callerMap[hashKey],
                value,
            });
        }
        if (canReport) {
            if (stdout) {
                stdout(output);
            } else {
                console.log(output);
            }
        }
        return Reflect.set(target, prop, value, receiver);
    };
}
複製程式碼

更有趣的是 trackClass 函式（至少對我來說是這樣）：

function trackClass(cls, options = {}) {
    cls.prototype = trackObject(cls.prototype, options);
    cls.prototype.constructor = cls;

    return new Proxy(cls, {
        construct(target, args) {
            const obj = new target(...args);
            return new Proxy(obj, {
                get: trackPropertyGet(options),
                set: trackPropertySet(options),
            });
        },
        apply: trackFunctionCall(options),
    });
}
複製程式碼

在這個案例中，因為我們希望攔截這個類上不屬於原型上的屬性，所以我們給這個類的原型建立了個代理，並且建立了個建構函式攔截器。

別忘了，即使你在原型上定義了一個屬性，但如果你再給這個物件賦值一個同名屬性，JavaScript 將會建立一個這個屬性的本地副本，所以賦值的改動並不會改變這個類其他例項的行為。這就是為何只對原型做代理並不能滿足要求的原因。

戳這裡檢視完整程式碼。

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章