TIL [Closure]

Closerとは?

外部関数が終了しても内部関数がまだ実行されている場合、内部関数が参照する外部関数は閉じられず、内部関数によって閉じられるため、モジュールと呼ばれます.したがって、Closerは内部変数への外部アクセスを可能にする関数です.

let globalVar = 'global';
function outerFn(){
  let outerVar = 'outer';
  console.log(outerVar);
  
  function innerFn(){
    let innerVar = 'inner';
    console.log(innerVar);
  }
  return innerFn;
}

outerFn()(); // outer 
             // inner
             // 함수를 실행하고 다시 안의 함수를 실행시킴
let innerFn = outerFn(); // 외부 함수 outerFn의 리턴값 innerFn함수를 innerFn이라는 변수에 담는다.
innerFn(); // same as outerFn()(). 
/* innerFn()이 실행되면 outerFn함수의 내부 함수인 innerFn함수가 실행된다. 
이때 outerFn함수를 특별히 실행하지는 않지만 내부 함수인 innerFn함수를 실행하다보면 outerFn함수를 참조하게 된다. 
그럼 어쩔수 없이 외부 함수는 닫히지 못하고 내부 함수 클로저에 의해서 닫히게 된다. */             

このようにCloserは外部関数変数にアクセスできる内部関数である.ここでcloser関数はinnerfnです.Closer関数では、領域変数、外部関数の変数、およびグローバル変数にアクセスできます.

Closer関数の例

1.フック:n個の関数を作成し、各関数がn個のパラメータを受信するようにし、1個の関数ではなくn個のパラメータを受信する。

function adder(x){
  return function(y){
    return x + y;
  }
}

adder(2)(3); // 5

let add100 = adder(100);
add100(2); // 102
add100(10); // 110

let add5 = adder(5);
add5(2); // 7

2.外部関数の変数は保存されており、テンプレート関数とともに使用できます。

function htmlMaker(tag){
  let startTag = '<' + tag + '>';
  let endTag = '</' + tag + '>';
  return function(content){
    return startTag + content + endTag;
  }
}

let divMaker = htmlMaker('div');
divMaker('code'); // <div>code</div>
divMaker('states'); // <div>states</div>

let h1Maker = htmlMaker('h1');
h1Maker('Headline'); // <h1>Headline</h1>

3.キャビネットモジュールモード：変数をミラー内に配置し、関数外に露出しないようにする方法

function makePayment(){
  let type = '현금';
  return { // 여기서 부터는 사실상 객체이다.
    payWithCash: function(amount){
      type = '현금'; // 변수가 안에 숨어있어서 payWithCash를 써야만 변수를 '현금'으로 바꿀 수 있다.
      console.log(type + '으로 ' + amount + '만큼 지불합니다.');
    },
    payWithCard: function(amount){
      type = '카드'; // 변수가 안에 숨어있어서 payWithCard를 써야만 변수를 '카드'로 바꿀 수 있다.
      console.log(type + '로 ' + amount + '만큼 지불합니다.');
    }
  }   
}
let payment  = makePayment();
payment.payWithCash('3만원'); // 현금으로 3만원만큼 지불합니다.
payment.payWithCard('1만원'); // 카드로 1만원만큼 지불합니다.

資料の出所

http://www.nextree.co.kr/p7363/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures