소개

JavaScript 클로저 학습 메모입니다.
잘못 지적 등 있으면 부담없이 코멘트하실 수 있으면 기쁩니다.

클로저란?

자신의 말로 간단하게 표현해 보면
정의한 함수 외부의 범위에 있는 변수나 함수를 참조할 수 있는 구조(또는 함수)
라고 이해했습니다.

공식이라고 이렇게 쓰여졌습니다.
클로저

클로저는 결합된(포위된) 함수와 주변 환경(렉시컬 환경)에 대한 참조의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수 범위에 대한 액세스를 제공합니다. JavaScript는 함수가 작성될 때마다 클로저를 작성합니다.

클로저의 장점

함수내 등의 변수나 함수등을 다른 프로그램으로부터 간단하게 변경되지 않도록 제어할 수 있는 것.

클로저 실행 샘플

초기값의 수치를 인수로 건네주고, 그것을 클로저 함수(내부에 정의한 함수)로부터 계산해, 계산 결과를 콘솔에 출력하는 샘플.

※샘플 코드는 TypeScript 로 기술하고 있습니다. 걱정하지 마세요.

// ４つのクロージャ関数を生成して返す関数
function calcFactory(def: number) {
  // ローカル変数result： calcFactory関数のスコープ内でしか参照できない
  let result: number = def;

  // この４つの関数たちがクロージャ
  const plus = (num: number) => {
    console.log("計算前", result);
    result = result + num;
    console.log("計算後", result);
  };
  const minus = (num: number) => {
    console.log("計算前", result);
    result = result - num;
    console.log("計算後", result);
  };
  const multiply = (num: number) => {
    console.log("計算前", result);
    result = result * num;
    console.log("計算後", result);
  };
  const divide = (num: number) => {
    console.log("計算前", result);
    result = result / num;
    console.log("計算後", result);
  };

  // クロージャ関数を返す
  return { plus, minus, multiply, divide };
}

// このタイミングでクロージャが生成される 
const calc = calcFactory(10);
calc.plus(3);
calc.minus(5);
calc.multiply(8);
calc.divide(4);

콘솔 출력 결과


이 때 calcFactory関数 중에서만 참조할 수 있다 変数result 에 계산 결과를 유지하면서 처리가 반복된다.変数result 는 클로저 함수 plus minus multiply divide

const calc = calcFactory(10);
calc.plus(3);
calc.minus(5);
calc.multiply(8);
calc.divide(4);
// クロージャを経由せずにresultを参照することはできない
calc.result; // エラー

함수가 생성될 때마다 클로저가 생성됨

공식적으로도 이러한 설명이 있지만,

JavaScript는 함수가 작성될 때마다 클로저를 작성합니다.

무엇인가 코드로 확인해 본다.

// このタイミングでdefに10をもつクロージャが生成される
const calc = calcFactory(10);
calc.plus(3);
calc.minus(5);
calc.multiply(8);
calc.divide(4);

console.log("--------------------------------------");

// このタイミングでdefに20をもつcalcとは異なるクロージャが生成される
const calc2 = calcFactory(20);
calc2.plus(3);
calc2.minus(5);
calc2.multiply(8);
calc2.divide(4);

calcFactory関数를 실행할 때마다 다른 (이 경우 引数def가 다른 숫자를 전달하여 変数result가 다릅니다) 클로저가 생성됩니다.

콘솔 출력 결과

마지막으로

매우 유익하고 알기 쉬운 기사만으로 살아났습니다! 고마워요!

htps : //에서 ゔぇぺぺr. 어쩌면. 오 rg / 자 / 도 CS / 우 b / 그럼 Sc 리 pt / C

htps //w w. 우데 my. 코 m / 이렇게 r세 / 그럼 sc 리 pt-에센세 /

htps : // 코 m / 타케 하루 / ms / 4975031

htps : // 이 m / ri gh s / ms / 494340cf16c7 a 35f742

htps //w w. 세주쿠. 네 t/bぉg/25026