メインコンテンツにスキップ
モジュール 4 · レッスン 4 / 4コース内の 16/32~12 min
モジュールのレッスン (4/4)

クロージャと範囲

クロージャは、それが定義されたスコープの変数を「記憶」する関数です。 その範囲が終了した後でも。魔法のように見えますが、これはスコープ ルールの直接の結果です。

スコープチェーン

関数は、スコープのチェーンをたどって、それ自体の外部で宣言された変数を読み取ることができます。

JS
const moltiplicatore = 10;

function moltiplicaPer10(n) {
  return n * moltiplicatore; // reads from the closure
}

moltiplicaPer10(3); // 30

ファンクションファクトリー

最も典型的なパターン: 別の関数を返す関数。 受け取ったパラメータ。

JS
function creaSaluto(prefisso) {
  return function (nome) {
    return `${prefisso}, ${nome}!`;
  };
}

const ciao = creaSaluto('Ciao');
const buongiorno = creaSaluto('Buongiorno');

ciao('Anna'); // 'Ciao, Anna!'
buongiorno('Marco'); // 'Buongiorno, Marco!'

creaSaluto を呼び出すたびに、独自の prefisso を持つ 別個の スコープが作成されます。

プライベート状態のカウンター

典型的な例: カウンターを外部に露出させずに保持するクロージャ。

JS
function creaContatore() {
  let n = 0;
  return function () {
    n++;
    return n;
  };
}

const c = creaContatore();
c(); // 1
c(); // 2
c(); // 3

const c2 = creaContatore();
c2(); // 1  ← isolated state!

n は プライベート です。クロージャの外部にいる人は誰もそれを読み取ったり変更したりすることはできません。

試してみてください

運動#js.m4.l4.e1
試行回数: 0読み込み中…

関数を返すファクトリ `makeCounter()` を実装します。関数の各呼び出しは、1 から始まる累進整数を返します。異なるカウンターは独立している必要があります。

エディターを読み込み中…
ヒントを表示

makeCounter 内で let を使用して n を宣言し、++n を実行する関数を返します。

3 回の試行後に解決策が利用可能になります

復習演習

運動#js.m4.l4.e2
試行回数: 0読み込み中…

関数を返す `makeAdderWith(base)` を実装します。数値 n を指定すると、base + n を返します。各加算器は自身の基数を記憶しています。

エディターを読み込み中…
ヒントを表示

外部パラメータのbaseを使用するアロー関数を返します。

3 回の試行後に解決策が利用可能になります