概要

プロキシ（Proxy）デザインパターンはJavaScriptで利用できるとても面白い機能です！ プロキシデザインパターンを使えば、関数の呼び出し前後で簡単な操作を行うことができます。 主な利用用途としては、ある関数をそのまま使用できない時に関数すべてに統一的な処理を行うことがあります。

使い方

JavaScript でプロキシデザインパターンを使うには、少し変わった書き方が必要です。 書き方を確認するために、3つの主な利用用途を例に挙げてみます。

簡単なロギングを行う

次のプロキシを使うと、関数を呼び出した時に簡単なロギングを行うことができます。

const myLoggingProxy = {
  apply(target, thisArg, args) {
    console.log('関数が実行されました！', target.name, args);
    return target.apply(thisArg, args);
  }
};

function myFunction(x, y) {
  return x + y;
}

// プロキシを適用
const myProxyFunction = new Proxy(myFunction, myLoggingProxy);

// 関数を実行
console.log(myProxyFunction(3, 5));
// ログ：関数が実行されました！ myFunction [3, 5]

// 結果：8

特定の条件を満たした時に関数を実行する

次のプロキシを使うと、特定の条件を満たす時に関数の評価をスキップできます。

// 条件：x ＝ 4 の時だけ関数を実行
const myConditionProxy = {
  apply(target, thisArg, args) {
    const [x, y] = args;
    if (x !== 4) {
      console.log('関数は実行されませんでした…');
      return;
    }
    return target.apply(thisArg, args);
  }
};

function myFunction(x, y) {
  return x + y;
}

// プロキシを適用
const myProxyFunction = new Proxy(myFunction, myConditionProxy);

// 関数を実行
myProxyFunction(3, 5);
// ログ：関数は実行されませんでした…

// 結果：undefined

メモ化を使って高速化する

次のプロキシを使うと、関数が実行された時に初めて評価するのではなく、前回に評価された際の結果を参照して高速化できます。

const myMemoizeProxy = {
  cache: {},

  apply(target, thisArg, args) {
    const key = JSON.stringify(args);
    if (!this.cache[key]) {
      this.cache[key] = target.apply(thisArg, args);
    }
    return this.cache[key];
  },
};

async function myFunction(x, y) {
  await new Promise((resolve) => {
    console.log("wait 1s...");
    setTimeout(() => {
      resolve();
    }, 1000);
  });
  return x + y;
}

// プロキシを適用
const myProxyFunction = new Proxy(myFunction, myMemoizeProxy);

// 関数を実行
(async () => {
  for (let i = 0; i < 5; i++) {
    console.log(await myProxyFunction(3, 5));
  }
})();
// キャッシュに保管された算出結果が使われます

結果：

wait 1s...
8
8
8
8
8

まとめ

以上のようにプロキシデザインパターンはJavaScriptで利用できるとっても面白い機能です！ プロキシを使うことで、関数の呼び出し前後で簡単な処理を行うことができます。

Mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.

Donate mình một ly cafe hoặc 1 cây bút bi để mình có thêm động lực cho ra nhiều bài viết hay và chất lượng hơn trong tương lai nhé. À mà nếu bạn có bất kỳ câu hỏi nào thì đừng ngại comment hoặc liên hệ mình qua: Zalo - 0374226770 hoặc Facebook. Mình xin cảm ơn.

Momo: NGUYỄN ANH TUẤN - 0374226770

TPBank: NGUYỄN ANH TUẤN - 0374226770 (hoặc 01681423001)