클로저는 다음의 쌍입니다.

1. 기능
2. 해당 함수의 외부 범위에 대한 참조 (어휘 환경)

어휘 환경은 모든 실행 컨텍스트 (스택 프레임)의 일부이며 식별자 (예 : 로컬 변수 이름)와 값 사이의 맵입니다.

JavaScript의 모든 함수는 외부 어휘 환경에 대한 참조를 유지합니다. 이 참조는 함수가 호출 될 때 작성된 실행 컨텍스트를 구성하는 데 사용됩니다. 이 참조는 함수 내부의 코드가 함수 호출시기 및 위치에 관계없이 함수 외부에서 선언 된 변수를 “볼”수있게합니다.

함수가 함수에 의해 호출 된 후 다른 함수에 의해 호출 된 경우 외부 어휘 환경에 대한 참조 체인이 작성됩니다. 이 체인을 스코프 체인이라고합니다.

다음 코드에서 변수를 닫으면 호출 inner될 때 작성된 실행 컨텍스트의 어휘 환경으로 클로저를 형성 합니다 .foosecret

function foo() {
  const secret = Math.trunc(Math.random()*100)
  return function inner() {
    console.log(`The secret number is ${secret}.`)
  }
}
const f = foo() // `secret` is not directly accessible from outside `foo`
f() // The only way to retrieve `secret`, is to invoke `f`

다시 말해, JavaScript에서 함수는 개인 “상태 상자”에 대한 참조를 가지고 있으며,이 함수 (및 동일한 어휘 환경 내에 선언 된 다른 함수) 만 액세스 할 수 있습니다. 이 상태 상자는 함수 호출자에게는 보이지 않으므로 데이터 숨기기 및 캡슐화를위한 탁월한 메커니즘을 제공합니다.

JavaScript의 함수는 변수 (퍼스트 클래스 함수)처럼 전달 될 수 있습니다. 즉, 이러한 기능 및 상태 쌍은 프로그램 주위에 전달 될 수 있습니다. C ++에서 클래스의 인스턴스를 전달하는 방법과 유사합니다.

JavaScript에 클로저가 없다면 함수간에 더 많은 상태를 명시 적으로 전달해야 하므로 매개 변수 목록이 길어지고 소음이 커집니다.

따라서 함수가 항상 개인 상태에 액세스하도록하려면 클로저를 사용할 수 있습니다.

… 우리 는 종종 상태를 함수와 연결하려고합니다. 예를 들어, Java 또는 C ++에서 개인 인스턴스 변수 및 메소드를 클래스에 추가하면 상태가 기능과 연관됩니다.

C 및 대부분의 다른 일반 언어에서 함수가 반환 된 후 스택 프레임이 손상되어 모든 로컬 변수에 더 이상 액세스 할 수 없습니다. JavaScript에서 다른 함수 내에 함수를 선언하면 외부 함수의 로컬 변수는 반환 된 후에도 계속 액세스 할 수 있습니다. 이러한 방법으로, 위의 코드에서, secret함수 객체를 사용 가능한 상태로 유지 inner, 후 가에서 반환되었습니다 foo.

폐쇄 사용

클로저는 함수와 관련된 개인 상태가 필요할 때마다 유용합니다. 이것은 매우 일반적인 시나리오입니다. JavaScript는 2015 년까지 클래스 구문이 없었으며 여전히 개인 필드 구문이 없습니다. 클로저는이 요구를 충족시킵니다.

프라이빗 인스턴스 변수

다음 코드에서 함수 toString는 자동차의 세부 정보를 닫습니다.

function Car(manufacturer, model, year, color) {
  return {
    toString() {
      return `${manufacturer} ${model} (${year}, ${color})`
    }
  }
}
const car = new Car('Aston Martin','V8 Vantage','2012','Quantum Silver')
console.log(car.toString())

기능적 프로그래밍

다음 코드에서 함수는 inner모두 이상 종료 fn와 args.

function curry(fn) {
  const args = []
  return function inner(arg) {
    if(args.length === fn.length) return fn(...args)
    args.push(arg)
    return inner
  }
}

function add(a, b) {
  return a + b
}

const curriedAdd = curry(add)
console.log(curriedAdd(2)(3)()) // 5

이벤트 중심 프로그래밍

다음 코드에서 함수 onClick는 변수를 닫습니다 BACKGROUND_COLOR.

const $ = document.querySelector.bind(document)
const BACKGROUND_COLOR = 'rgba(200,200,242,1)'

function onClick() {
  $('body').style.background = BACKGROUND_COLOR
}

$('button').addEventListener('click', onClick)

<button>Set background color</button>

모듈화

다음 예제에서 모든 구현 세부 사항은 즉시 실행되는 함수 표현식 안에 숨겨져 있습니다. 기능 tick및 toString민간 상태 이상 가까이 기능은 그들의 작업을 완료해야합니다. 클로저를 통해 코드를 모듈화하고 캡슐화 할 수있었습니다.

let namespace = {};

(function foo(n) {
  let numbers = []
  function format(n) {
    return Math.trunc(n)
  }
  function tick() {
    numbers.push(Math.random() * 100)
  }
  function toString() {
    return numbers.map(format)
  }
  n.counter = {
    tick,
    toString
  }
}(namespace))

const counter = namespace.counter
counter.tick()
counter.tick()
console.log(counter.toString())

예

실시 예 1

이 예제는 로컬 변수가 클로저에 복사되지 않음을 보여줍니다. 클로저는 원래 변수 자체에 대한 참조를 유지 합니다 . 마치 외부 함수가 종료 된 후에도 스택 프레임이 메모리에 계속 살아있는 것처럼 보입니다.

function foo() {
  let x = 42
  let inner  = function() { console.log(x) }
  x = x+1
  return inner
}
var f = foo()
f() // logs 43

실시 예 2

다음 코드, 세 가지 방법에서 log, increment그리고 update같은 어휘 환경에 대한 모든 가깝습니다.

그리고 매번 createObject호출 될 때마다 새로운 실행 컨텍스트 (스택 프레임)가 생성되고 완전히 새로운 변수가 생성되고이 새로운 변수 x에 log근접한 새로운 기능 세트 등이 생성됩니다.

function createObject() {
  let x = 42;
  return {
    log() { console.log(x) },
    increment() { x++ },
    update(value) { x = value }
  }
}

const o = createObject()
o.increment()
o.log() // 43
o.update(5)
o.log() // 5
const p = createObject()
p.log() // 42

실시 예 3

를 사용하여 선언 var된 변수를 사용하는 경우 닫고있는 변수를 이해해야합니다. 를 사용하여 선언 된 변수 var는 게양됩니다. 이는 letand 의 도입으로 인해 최신 JavaScript에서 문제가 훨씬 적습니다 const.

다음 코드에서는 루프를 돌 때마다 새 함수 inner가 작성되어 닫힙니다 i. 그러나 var i루프 외부에 들어 있기 때문에 이러한 모든 내부 함수는 동일한 변수에 대해 닫히므로 i(3) 의 최종 값이 세 번 인쇄됩니다.

function foo() {
  var result = []
  for (var i = 0; i < 3; i++) {
    result.push(function inner() { console.log(i) } )
  }
  return result
}

const result = foo()
// The following will print `3`, three times...
for (var i = 0; i < 3; i++) {
  result[i]()
}

최종 포인트 :

• 함수가 JavaScript로 선언 될 때마다 클로저가 작성됩니다.
• 반환 function외부 함수 내부 상태를 외부 함수가 실행을 완료 한 후에도, 반환 내부 기능을 암시 사용할 수 있으므로 다른 함수 내부에서 것은 클로저의 고전적인 예이다.
• eval()함수 안에서 사용할 때마다 클로저가 사용됩니다. eval함수의 로컬 변수를 참조 할 수 있는 텍스트 이며, 엄격하지 않은 모드에서는을 사용하여 새 로컬 변수를 만들 수도 있습니다 eval('var foo = …').
• 함수 내에서 new Function(…)( Function constructor ) 를 사용하면 어휘 환경을 닫지 않고 전역 컨텍스트를 닫습니다. 새 함수는 외부 함수의 로컬 변수를 참조 할 수 없습니다.
• 자바 스크립트의 클로저는 참조 (유지처럼 NOT 상단의 전역 객체를 차례로 등등의 외부 범위에 대한 참조를 유지하고, 함수 선언의 시점에서 모든 방법을 범위에 사본) 스코프 체인
• 함수가 선언되면 클로저가 생성됩니다. 이 클로저는 함수가 호출 될 때 실행 컨텍스트를 구성하는 데 사용됩니다.
• 함수가 호출 될 때마다 새로운 로컬 변수 세트가 작성됩니다.

연결

• 클로저를 사용하여 개체에 대한 Douglas Crockford의 시뮬레이션 된 개인 속성 및 개인 메서드 .
• 조심하지 않으면 IE에서 클로저가 메모리 누수를 일으키는 방법에 대한 훌륭한 설명 .

답변

function foo(x) {
  var tmp = 3;

  function bar(y) {
    console.log(x + y + (++tmp)); // will log 16
  }

  bar(10);
}

foo(2);

function foo(x) {
  var tmp = 3;

  return function (y) {
    console.log(x + y + (++tmp)); // will also log 16
  }
}

var bar = foo(2);
bar(10); // 16
bar(10); // 17

var a = 10;

function test() {
  console.log(a); // will output 10
  console.log(b); // will output 6
}
var b = 6;
test();

function princess() {

    var adventures = [];

    function princeCharming() { /* ... */ }

    var unicorn = { /* ... */ },
        dragons = [ /* ... */ ],
        squirrel = "Hello!";

    /* ... */

    return {

        story: function() {
            return adventures[adventures.length - 1];
        }
    };
}

var littleGirl = princess();

littleGirl.story();

function makeKitchen() {
  var trashBags = ['A', 'B', 'C']; // only 3 at first

  return {
    getTrashBag: function() {
      return trashBags.pop();
    }
  };
}

var kitchen = makeKitchen();

console.log(kitchen.getTrashBag()); // returns trash bag C
console.log(kitchen.getTrashBag()); // returns trash bag B
console.log(kitchen.getTrashBag()); // returns trash bag A

// Declare counter outside event handler's scope
var counter = 0;
var element = document.getElementById('button');

element.addEventListener("click", function() {
  // Increment outside counter
  counter++;

  if (counter === 3) {
    // Do something every third time
    console.log("Third time's the charm!");

    // Reset counter
    counter = 0;
  }
});

<button id="button">Click Me!</button>

var element = document.getElementById('button');

element.addEventListener("click", (function() {
  // init the count to 0
  var count = 0;

  return function(e) { // <- This function becomes the click handler
    count++; //    and will retain access to the above `count`

    if (count === 3) {
      // Do something every third time
      console.log("Third time's the charm!");

      //Reset counter
      count = 0;
    }
  };
})());

<button id="button">Click Me!</button>

//          _______________________Immediately invoked______________________
//         |                                                                |
//         |        Scope retained for use      ___Returned as the____      |
//         |       only by returned function   |    value of func     |     |
//         |             |            |        |                      |     |
//         v             v            v        v                      v     v
var func = (function() { var a = 'val'; return function() { alert(a); }; })();

func();  // Alerts "val"
func.a;  // Undefined

    var bind = function(x) {
        return function(y) { return x + y; };
    }

    var plus5 = bind(5);
    console.log(plus5(3));

console.log(x + 3);

var plane = function(defaultAirport) {

  var lastAirportLeft = defaultAirport;

  var car = {
    driver: {
      startAccessPlaneInfo: function() {
        setInterval(function() {
          console.log("Last airport was " + lastAirportLeft);
        }, 2000);
      }
    }
  };
  car.driver.startAccessPlaneInfo();

  return {
    leaveTheAirport: function(airPortName) {
      lastAirportLeft = airPortName;
    }
  }
}("Boryspil International Airport");

plane.leaveTheAirport("John F. Kennedy");