>웹 프론트엔드 >JS 튜토리얼 >JavaScript의 클로저 메커니즘에 대한 심층 분석_기본 지식

JavaScript의 클로저 메커니즘에 대한 심층 분석_기본 지식

WBOY
WBOY원래의
2016-05-16 15:35:591146검색

자바스크립트 변수는 지역 변수일 수도 있고 전역 변수일 수도 있습니다.
비공개 변수에는 클로저를 사용할 수 있습니다.
전역 변수
함수는 다음과 같이 함수 내에 정의된 변수에 액세스할 수 있습니다.
예시

function myFunction() {
  var a = 4;
  return a * a;
}


함수는 다음과 같이 함수 외부에 정의된 변수에 액세스할 수도 있습니다.
예시

var a = 4;
function myFunction() {
  return a * a;
}

후자의 예에서 a는 전역 변수입니다.
웹 페이지의 전역 변수는 창 개체에 속합니다.
전역 변수는 페이지의 모든 스크립트에 적용됩니다.
첫 번째 경우, a는 지역 변수입니다.
지역 변수는 해당 변수가 정의된 함수 내에서만 사용할 수 있습니다. 다른 함수나 스크립트 코드에는 사용할 수 없습니다.
전역 변수와 지역 변수는 이름이 같아도 서로 다른 변수입니다. 그 중 하나를 수정해도 다른 값에는 영향을 미치지 않습니다.
참고
var 키워드 없이 변수를 선언하면 함수 내에서 정의되더라도 전역 변수가 됩니다.

가변 생명주기
전역 변수의 범위는 전역입니다. 즉, 전역 변수는 전체 JavaScript 프로그램의 모든 곳에 있습니다.
함수 내부에 선언된 변수는 함수 내부에서만 작동합니다. 이러한 변수는 지역 변수이고 해당 범위는 지역입니다. 함수의 매개변수도 지역적이며 함수 내에서만 작동합니다.
카운터 딜레마
일부 값을 계산하려고 하는데 모든 함수에서 카운터를 사용할 수 있다고 가정해 보세요.
전역 변수, 함수를 사용하여 카운터를 증가하도록 설정할 수 있습니다.
예시

var counter = 0;

function add() {
  counter += 1;
}

add();
add();
add();

// 计数器现在为 3

add() 함수가 실행되면 카운터 값이 변경됩니다.
그러나 여기에 문제가 있습니다. add() 함수가 호출되지 않더라도 페이지의 모든 스크립트가 카운터를 변경할 수 있다는 것입니다.
함수 내부에 카운터를 선언하면 함수를 호출하지 않고는 카운터 값을 수정할 수 없습니다.
예시

function add() {
  var counter = 0;
  counter += 1;
}

add();
add();
add();

// 本意是想输出 3, 但事与愿违,输出的都是 1 !

위 코드는 올바르게 출력되지 않습니다. add() 함수를 호출할 때마다 카운터가 1로 설정됩니다.
JavaScript 인라인 함수는 이 문제를 해결할 수 있습니다.
JavaScript 내장 함수
모든 함수는 전역 변수에 접근할 수 있습니다.
실제로 JavaScript에서는 모든 함수가 그 위의 범위에 액세스할 수 있습니다.
JavaScript는 중첩 함수를 지원합니다. 중첩된 함수는 상위 수준의 함수 변수에 접근할 수 있습니다.
이 예에서 인라인 함수 plus()는 상위 함수의 카운터 변수에 액세스할 수 있습니다.
예시

function add() {
  var counter = 0;
  function plus() {counter += 1;}
  plus();  
  return counter; 
}

외부에서 plus() 함수에 액세스할 수 있다면 카운터 딜레마가 해결될 것입니다.
또한 counter = 0이 한 번만 실행되는지 확인해야 합니다.
폐쇄가 필요합니다.
자바스크립트 클로저
자신을 호출하는 함수를 기억하시나요? 이 기능은 무엇을 합니까?
예시

var add = (function () {
  var counter = 0;
  return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器为 3

예시 분석
변수 add는 자신을 호출하는 함수의 반환 단어 값을 지정합니다.
자체 호출 기능은 한 번만 실행됩니다. 카운터를 0으로 설정합니다. 함수 표현식을 반환합니다.
add 변수를 함수로 사용할 수 있습니다. 멋진 부분은 함수 위의 범위에서 카운터에 대한 액세스를 제공한다는 것입니다.
이를 JavaScript 클로저라고 합니다. 함수가 개인 변수를 가질 수 있게 해줍니다.
카운터는 익명 함수의 범위로 보호되며 add 메소드를 통해서만 수정할 수 있습니다.

참고
클로저는 이전 함수가 닫힌 경우에도 이전 함수의 범위에 있는 변수에 액세스할 수 있는 함수입니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.