JavaScript 클로저 이해 및 사용

JavaScript 클로저는 전역 변수와 지역 변수에서 중요한 역할을 합니다. 이 글에서는 관련 지식을 설명합니다.

JavaScript 변수는 지역 변수일 수도 있고 전역 변수일 수도 있습니다.

개인 변수는 클로저를 사용할 수 있습니다.

전역 변수

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

instances

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

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

instances

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

후자의 예에서 a는 전역 변수.

웹 페이지의 전역 변수는 창 개체에 속합니다.

전역 변수는 페이지의 모든 스크립트에 적용됩니다.

첫 번째로 a는 지역 변수입니다.

로컬 변수는 해당 변수가 정의된 함수 내에서만 사용할 수 있습니다. 다른 함수나 스크립트 코드에는 사용할 수 없습니다.

전역 변수와 지역 변수는 이름이 같아도 서로 다른 변수입니다. 하나를 수정해도 다른 값에는 영향을 미치지 않습니다.

변수 선언 시 var 키워드를 사용하지 않으면 함수 내에서 정의하더라도 전역 변수가 됩니다.

변수 수명 주기

전역 변수의 범위는 전역입니다. 즉, 전역 변수는 전체 JavaScript 프로그램의 모든 곳에 있습니다.

함수 내부에 선언된 변수는 함수 내부에서만 작동합니다. 이러한 변수는 지역 변수이고 해당 범위는 지역입니다. 함수의 매개변수도 지역적이며 함수 내에서만 작동합니다.

카운터 딜레마

어떤 값을 세고 싶은데 모든 기능에서 카운터를 사용할 수 있다고 상상해 보세요.

전역 변수와 함수를 사용하여 카운터 증분을 설정할 수 있습니다.

예

var counter = 0; 
function add() {
   return counter += 1;}
 add();add();add(); 
// 计数器现在为 3

add() 함수가 실행되면 카운터 값이 변경됩니다.

하지만 여기에 문제가 있습니다. add() 함수가 호출되지 않더라도 페이지의 모든 스크립트가 카운터를 변경할 수 있다는 것입니다.

함수 내부에 카운터를 선언하면 함수를 호출하지 않고는 카운터 값을 수정할 수 없습니다.

예제

function add() {
    var counter = 0;    return 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이 한 번만 실행되도록 해야 합니다.

우리는 폐쇄가 필요합니다.

JavaScript Closures

함수 자체 호출을 기억하시나요? 이 기능은 무엇을 합니까?

Examples

var add = (function () {
    var counter = 0;    return function () {return counter += 1;}})(); 
add();add();add(); 
// 计数器为 3

전역변수와 지역변수에 대한 클로저 지식을 전반적으로 이해하시기 바랍니다. 더 많은 학습자료는 PHP 중국어 홈페이지를 참고해주세요.

관련 권장 사항:

JavaScript 양식 유효성 검사 관련 설명

JavaScript 팝업 이벤트 관련 지식

JavaScript 날짜(날짜) 관련 지식 및 사용법

위 내용은 JavaScript 클로저 이해 및 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!