자바 스크립트 폐쇄 및 범위 : 심층 가이드

JavaScript 클로저는 기능이 외부 기능이 실행 된 후에도 외부 범위에서 변수에 액세스 할 수 있도록합니다. JavaScript의 함수는 어휘 환경에 대한 참조를 유지하기 때문입니다. 1. 스코프는 세 가지 유형의 가변 접근성을 결정합니다 : Global, Function (Local) 및 블록 범위 (LET 및 Const 사용); 2. 데이터 캡슐화, 이벤트 핸들러 및 기능 공장과 같은 예에서 볼 수 있듯이 내부 기능이 외부 기능 범위에서 변수에 액세스 할 때 폐쇄가 형성됩니다. 3. 일반적인 함정에는 VAR의 함수-스코핑으로 인한 루프의 잘못된 동작이 포함되며, 이는 let 또는 즉시 투자 된 함수를 사용하여 고정 할 수 있습니다. 4. 클로저는 쓰레기가 참조 변수의 수집을 방지하므로 메모리 사용을 고려해야합니다. 5. 실제 용도에는 개인 변수 생성, 이벤트 콜백 및 기능 공장을 통해 특수 기능 생성이 포함됩니다. 효과적인 JavaScript 개발을 위해서는 폐쇄와 범위를 이해하는 것이 필수적이며 일반적인 버그를 피합니다.

JavaScript Closure 및 Scope는 모든 개발자가 효과적이고 버그없는 코드를 작성하기 위해 이해해야하는 기본 개념입니다. 처음에는 혼란스러워 보일 수 있지만 일단 작동 방식을 파악하면 이벤트 핸들러부터 모듈 패턴 및 기능 프로그래밍에 이르기까지 모든 곳에서 작동하는 것을 볼 수 있습니다.

단계별로 분해합시다.

JavaScript의 범위는 무엇입니까?

범위는 코드에서 변수에 액세스 할 수있는 위치를 결정합니다. JavaScript에는 세 가지 주요 유형의 범위가 있습니다.

• 글로벌 범위 : 모든 기능 외부에서 선언 된 변수는 전 세계적으로 액세스 할 수 있습니다.
• 함수 (로컬) 범위 : 함수 내부에서 선언 된 변수는 해당 함수 내에서만 액세스 할 수 있습니다.
• 블록 스코프 (ES6) : let 및 const 로 선언 된 변수는 블록 {} (예 : 내부, if , for 또는 모든 블록)로 제한됩니다.

 var globalvar = "I 'm global";

함수 예제 () {
  var functionvar = "나는 로컬로 예를 들어";
  if (true) {
    blockvar = "나는 블록 스코핑 된 것"을하자;
    console.log (blockvar); // 작동합니다
  }
  // console.log (blockvar); // referenceError
}

클로저에 의존하기 때문에 범위를 이해하는 것이 필수적입니다.

폐쇄 란 무엇입니까?

클로저는 외부 기능이 실행 된 후에도 외부 변수를 "기억"하고 액세스 할 수있는 함수입니다.

간단한 용어로 :

폐쇄는 부모 함수가 반환 된 후 오랫동안 부모 함수의 범위에서 변수에 대한 함수 액세스를 제공합니다.

다음은 전형적인 예입니다.

 함수 외부 () {
  outervar = "나는 외부에서왔다";

  함수 내부 () {
    Console.log (Outervar); // 내면의 "기억"OUTERVAR
  }

  내면의 반환;
}

const closurefunc = OUTER ();
closurefunc (); // 로그 : "나는 외부에서왔다"

outer() 이미 실행을 완료했지만 inner() 여전히 outerVar 에 액세스 할 수 있습니다. 그것이 행동의 폐쇄입니다.

후드 아래에서 폐쇄가 작동하는 방법

함수가 정의되면 JavaScript는 어휘 환경을 만듭니다. 본질적으로 해당 함수가 생성 된 위치에 대한 참조입니다. 이 환경에는 해당 위치에서 액세스 할 수있는 모든 변수가 포함되어 있습니다.

중첩 된 기능 ( inner 와 같은)이 반환되거나 전달되면이 어휘 환경을 전달합니다. 따라서 태어난 범위에서 여전히 변수에 액세스 할 수 있습니다.

이 동작은 다음과 같이 가능합니다.

• JavaScript의 함수는 일류 개체 입니다 (반환, 할당, 통과 할 수 있음).
• 내부 함수는 외부 범위에서 참조하는 변수에 대한 폐쇄를 형성합니다.

폐쇄의 실제 사용

폐쇄는 이론적 일뿐 만 아니라 실제 JavaScript에서 항상 사용됩니다.

1. 데이터 캡슐화 및 개인 변수

클로저를 사용하여 개인 변수를 시뮬레이션 할 수 있습니다.

 함수 createCounter () {
  count = 0을하자; // 직접 액세스 할 수 없습니다

  return function () {
    세다 ;
    Console.log (count);
  };
}

const counter = createCounter ();
계수기(); // 1
계수기(); // 2
계수기(); // 3
//`count '는 개인입니다. 외부에서 수정할 수 없습니다.

이 패턴은 JavaScript의 모듈 패턴 의 기초입니다.

2. 이벤트 핸들러 및 콜백

클로저는 일반적으로 DOM 이벤트에서 사용됩니다.

 함수 setupbutton (메시지) {
  const button = document.createelement ( 'button');
  button.textContent = '나를 클릭하십시오';

  button.adeventListener ( 'click', function () {
    경고 (메시지); //`메시지 '는 폐쇄를 통해 기억됩니다
  });

  document.body.appendChild (버튼);
}

SetupButton ( "클로저에서 안녕하세요!");

setupButton 완료된 후에도 클릭 핸들러는 여전히 message 기억합니다.

3. 기능 공장

특정 데이터에 맞춰진 기능을 만들 수 있습니다.

 함수 makemultiplier (x) {
  반환 함수 (y) {
    x * y를 반환합니다.
  };
}

const double = makemultiplier (2);
const triple = makemultiplier (3);

Console.log (Double (5)); // 10
Console.log (트리플 (5)); // 15

각각의 반환 된 함수는 생성 된 x 의 값을 "기억"합니다.

폐쇄가있는 일반적인 함정

강력하지만 폐쇄는 특히 루프에서 혼란을 초래할 수 있습니다.

문제 : 루프의 폐쇄

 for (var i = 0; i <3; i) {
  settimeout (() => {
    Console.log (i); // 항상 3 번 3 번을 기록합니다
  }, 100);
}

왜? var 는 함수-스코핑이고 모든 콜백은 동일한 i 대한 폐쇄를 형성하기 때문입니다. setTimeout 실행될 때까지 루프가 완료되었으며 i === 3 .

솔루션 :

• let (블록-스코핑) 사용 :

 for (i = 0; i <3; i) {
  settimeout (() => {
    Console.log (i); // 0, 1, 2 로그
  }, 100);
}

• 또는 현재 값을 캡처하는 폐쇄를 만듭니다.

 for (var i = 0; i <3; i) {
  (기능 (색인) {
    settimeout (() => {
      Console.log (색인); // 0, 1, 2 로그
    }, 100);
  })(나);
}

이 즉시 관련된 기능은 각 반복에 대한 새로운 범위를 만듭니다.

메모리 고려 사항

내부 기능이 외부 범위에 대한 참조를 유지하기 때문에 폐쇄는 변수가 수집되는 것을 방지 할 수 있습니다.

이것은 일반적으로 괜찮지 만 큰 물체 나 DOM 요소를 다룰 때 조심해야합니다. 참조를 불필요하게 유지하면 메모리 누출이 발생할 수 있습니다.

 함수 HeavyFunction () {
  const bigdata = new Array (1000000) .fill ( 'data');

  return function () {
    Console.log ( 'Processing ...');
    //이 함수가 존재하는 한 BigData는 해제되지 않습니다.
  };
}

필요한 것만 가까이 가십시오.

핵심 요점 요약

• 스코프는 변수가 액세스 가능한 위치를 정의합니다 (글로벌, 함수, 블록).
• 폐쇄는 외부 (Enclosing) 범위에서 변수에 대한 액세스를 유지하는 기능입니다.
• 클로저는 데이터 개인 정보 보호 , 기능 공장을 가능하게하며 콜백 및 이벤트 처리기 에 필수적입니다.
• var 의 루프 문제를 조심하십시오 - let 또는 iifes를 선호하십시오.
• 클로저는 변수를 살아있게 유지합니다. 메모리 사용을 염두에 두십시오.

클로저와 범위를 이해하려면 연습이 필요합니다. 중첩 된 기능, 콜백 및 모듈로 작업할수록 더 자연스럽게됩니다.

기본적으로 함수가 태어난 곳에서 변수를 기억하는 경우 - 폐쇄입니다. 그리고 그것은 JavaScript입니다.

위 내용은 자바 스크립트 폐쇄 및 범위 : 심층 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!