객체 지향 JavaScript — 클로저

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

JavaScript는 부분적으로 객체 지향 언어입니다.

JavaScript를 배우려면 JavaScript의 객체 지향 부분을 배워야 합니다.

이 기사에서는 함수를 살펴보겠습니다.

함수를 반환하는 함수

함수는 함수를 반환할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

function a() {
  console.log('foo');
  return function() {
    console.log('bar');
  };
}

함수를 반환한 다음 반환한 함수를 호출할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

a()();

그런 다음 첫 번째 호출a  , 따라서 'foo'가 기록됩니다.

그런 다음 반환된 함수를 두 번째 괄호로 호출하여 'bar' 기록됩니다.

스스로 다시 작성하는 함수

우리는 함수가 스스로 재작성할 수 있다는 것을 알아야 합니다.

예를 들어 다음과 같이 작성할 수 있습니다.

function a() {
  console.log('foo');
  a = function() {
    console.log('bar');
  };
}

그런 다음 'foo' 기록됩니다.

첫 번째 콘솔 로그가 실행된 다음 기능이 재할당됩니다.

우리는 그렇게 해서는 안 되며 우리가 이렇게 하면 린터가 경고할 것입니다.

폐쇄

클로저는 내부에 다른 기능이 있는 함수입니다.

내부 함수는 외부 함수의 범위에 액세스할 수 있습니다.

예를 들어 다음이 있는 경우:

function outer() {
  let outerLocal = 2;

  function inner() {
    let innerLocal = 3;
    return outerLocal + innerLocal;
  }
  return inner();
}

inner 변수가 있는 innerLocal 함수가 있습니다.
inner 함수 내에서만 사용할 수 있습니다.
outer 함수의 outerLocal 변수에 접근할 수도 있습니다.

이것은 코드에 개인 변수를 갖고 싶기 때문에 유용합니다.
outerLocal 및 innerLocal inner 만 사용할 수 있습니다.
outer는 inner의 변수에 접근할 수 없습니다  .

따라서 우리는 이러한 기능에 대해 서로 다른 수준의 개인 정보를 보유하고 있습니다.

루프의 폐쇄

다음과 같은 루프가 있는 경우:

function foo() {
  var arr = [],
    i;
  for (i = 0; i < 3; i++) {
    arr[i] = () => i
  }
  return arr;
}

그런 다음 호출하면 다음과 같습니다.

const arr = foo();
for (const a of arr){
 console.log(a());
}

그런 다음 모든 콘솔 로그에서 3을 얻습니다.
i 에 추가된 기능을 할당할 때 arr 가 3이기 때문입니다.
var는 블록 범위가 아니므로 루프에 있는 값 대신 i의 마지막 값을 얻습니다.

루프 제목에서 우리가 할당한 함수로 i 값을 얻으려면 다음과 같이 작성합니다.

function foo() {
  var arr = [],
    i;
  for (i = 0; i < 3; i++) {
    ((j) => {
      arr[i] = () => j
    })(i)
  }
  return arr;
}

그런 다음 예상대로 0, 1, 2를 얻습니다.
var를 let로 대체하여 i를 블록 범위로 만들고 이 문제를 피할 수도 있습니다.

Getter 및 Setter

Getter 함수는 값을 반환하고 setter는 값을 설정합니다.

getter 및 setter 함수를 클로저에 넣어 비공개로 유지할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

let getValue, setValue;
(() => {
  let secretVal = 0;
  getValue = () => {
    return secretVal;
  };

  setValue = (v) => {
    if (typeof v === "number") {
      secretVal = v;
    }
  };
}());

그리고 getValue, setValue 함수에 함수를 할당하는 함수를 실행합니다.
getValue는 secretVal의 값을 반환하고 setValue는 값을 설정합니다.

이런 식으로 secretVal 비밀을 유지합니다.

결론

클로저는 다양한 애플리케이션에 적합합니다.

변수를 비공개로 유지하는 것이 대부분이며, 변수 값을 예상대로 바인딩하는 데 사용할 수도 있습니다.