「closure」タグの記事が1件件あります

Javascriptのクロージャについて

2024年3月5日 · 約2分

Mikyan

白い柴犬

クロージャはJavascriptの囲まれた関数とその周囲のレキシカル環境です。クロージャは関数にその外側のスコープにアクセスする機能を提供します。

クロージャを使うことで、プライベートのステートを隠すことができる非同期のコードのステートを保持できる

よく使う場所は、Function Factories Callback、Eventハンドラー、Moduleパータンではクロージャはよく使える。

プライベートの環境を関数に提供できます。

ユースケース

実はLodash関数は大量にクロージャを使っています。

memorize

function memorize(func) {
  const cache = new Map();
  return function (...args) {
    const key = args[0];
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = func.apply(this, args);
    cache.set(key, result);
    return result;
  }
}

function useState(init: string) {
  let value = init; 
  function setValue(newValue: string) {
    let value = newValue;
  }
  return [value, setValue]
}

function useEffect(func, dependency) {
  const executed = new Map();
  if (executed[dependency.join(',')]) {
    return ;
  } else {
    executed[dependency.join(',')] = true;
    func();
  }
  return ;
}

function executeUseEffect() {
  let a = 1, b = 2;
  useEffect(() {
    console.log(a + b)
  }, [a, b]);
  useEffect(() {
    console.log(a + b)
  }, [a, b]);

  b = 3;
  useEffect(() {
    console.log(a + b)
  }, [a, b]);
}