JavaScript代理模式，怎麼實現物件的動態代理？

在JavaScript中，代理模式是一種常見的設計模式，它允許我們在不改變物件本身的情況下，透過代理物件來控制物件的訪問。代理模式可以用於實現快取、許可權控制、遠端呼叫等功能。

代理模式的定義

代理模式是指在訪問物件時引入一定程度的間接性，因為這種間接性可以附加多種用途，所以代理模式是一種非常常用的設計模式。

代理模式的實現

在JavaScript中，我們可以使用Proxy物件來實現代理模式。Proxy物件是ES6中新增的一個物件，它可以用來代理另一個物件，攔截並改變該物件的預設行為。

下面是一個簡單的例子，我們透過代理物件來控制對原始物件的訪問：

let target = {

  name: 'Tom',

  age: 18

};

let proxy = new Proxy(target, {

  get(target, key) {

    console.log(`get ${key}`);

    return target[key];

  },

  set(target, key, value) {

    console.log(`set ${key}=${value}`);

    target[key] = value;

  }

});

proxy.name; // 輸出：get name

proxy.age = 20; // 輸出：set age=20

在上面的例子中，我們建立了一個原始物件target，然後透過Proxy物件建立了一個代理物件proxy。代理物件proxy攔截了對原始物件target的訪問，並輸出了相應的日誌資訊。

代理模式的應用

代理模式在實際開發中有很多應用場景，下面介紹其中的兩個：

快取代理

快取代理是指在訪問某個物件時，如果該物件已經被訪問過，那麼直接返回快取中的資料，否則執行原始的訪問操作，並將結果快取起來。

下面是一個簡單的例子，我們透過代理物件來實現快取代理：

function createProxy(fn) {

  let cache = new Map();

  return new Proxy(fn, {

    apply(target, thisArg, args) {

      let key = args.join(',');

      if (cache.has(key)) {

        console.log(`get result from cache: ${cache.get(key)}`);

        return cache.get(key);

      } else {

        let result = target.apply(thisArg, args);

        cache.set(key, result);

        console.log(`set result to cache: ${result}`);

        return result;

      }

    }

  });

}

function add(a, b) {

  return a + b;

}

let proxy = createProxy(add);

proxy(1, 2); // 輸出：set result to cache: 3

proxy(1, 2); // 輸出：get result from cache: 3

在上面的例子中，我們透過createProxy函式建立了一個代理物件proxy，該代理物件攔截了對add函式的呼叫，並實現了快取代理的功能。

許可權控制代理

許可權控制代理是指在訪問某個物件時，如果當前使用者沒有許可權訪問該物件，那麼直接返回錯誤資訊，否則執行原始的訪問操作。

下面是一個簡單的例子，我們透過代理物件來實現許可權控制代理：

let target = {

  name: 'Tom',

  age: 18

};

let proxy = new Proxy(target, {

  get(target, key) {

    if (key === 'age') {

      console.log(`access denied: ${key}`);

      return undefined;

    } else {

      console.log(`get ${key}`);

      return target[key];

    }

  }

});

proxy.name; // 輸出：get name

proxy.age; // 輸出：access denied: age

在上面的例子中，我們建立了一個原始物件target，然後透過Proxy物件建立了一個代理物件proxy。代理物件proxy攔截了對原始物件target的訪問，並實現了許可權控制的功能。

代理模式 是一種非常常用的設計模式，它可以用於實現快取、許可權控制、遠端呼叫等功能。在JavaScript中，我們可以使用Proxy物件來實現代理模式。