- 내부함수인데 반환되어 계속 사용되는 함수


function outf(){

            var f=10;//자유변수, 클로저에서 사용됨


            //내부함수, 반환되어 사용됨 => 클로저

            function inf(){

                console.log(f);

            }

            return inf;//내부함수를 반환

        }



//=========================

- 예

function makeAdder(x) {

  return function(y) {

    return x + y;

  };

}


var add5 = makeAdder(5);

var add10 = makeAdder(10);


console.log(add5(2));  // 7

console.log(add10(2)); // 12



//============================

// 클로저 이용 예) - 클릭해서 글자크기 조정

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures#%EC%8B%A4%EC%9A%A9%EC%A0%81%EC%9D%B8_%ED%81%B4%EB%A1%9C%EC%A0%80


<script>

function makeSizer(size) {

            return function () {                

                document.body.style.fontSize = size + 'px';

            };

        }


        var size10 = makeSizer(10);

        var size20 = makeSizer(20);


        window.onload = function (){

            document.getElementById('size-10').onclick = size10;

            document.getElementById('size-20').onclick = size20;            

        }

    </script>



<body>

    <a href="#" id="size-10"> 10 </a>

    <a href="#" id="size-20"> 20 </a>

    

    <p >Some paragraph text</p>



//==========================================

루프에서 클로저 생성하기: 일반적인 실수

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures#%EB%A3%A8%ED%94%84%EC%97%90%EC%84%9C_%ED%81%B4%EB%A1%9C%EC%A0%80_%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0_%EC%9D%BC%EB%B0%98%EC%A0%81%EC%9D%B8_%EC%8B%A4%EC%88%98




//============================

// 객체 생성자에서 메소드는 프로토타입에 연결되는 것을 권장

- 이유 : 별도로 정의 되면, 개체가 생성될때마다 다시 할당됨

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures#%EC%84%B1%EB%8A%A5_%EA%B4%80%EB%A0%A8_%EA%B3%A0%EB%A0%A4_%EC%82%AC%ED%95%AD





//==============

//참고

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



반응형

'Code > JavaScript' 카테고리의 다른 글

[JavaScript] 정규식(Regular Expression)  (0) 2019.01.02
[JavaScript] 배열(Array)  (0) 2019.01.01
[JavaScript] for 루프 키워드  (0) 2019.01.01
[JavaScript] Tips  (0) 2019.01.01
[JavaScript] 제너레이터 함수 ( function* )  (0) 2019.01.01
Posted by codens