자바스크립트 클로저

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

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

전역 변수

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<p>访问函数内部定义的变量:</p>
<button type="button" onclick="myFunction()">查看</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var a = 4;
        document.getElementById("demo").innerHTML = a * a;
    }
</script>
</body>
</html>

프로그램을 실행하고 사용해 보세요.

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可以访问定义在函数外的变量：</p>
<button type="button" onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var a = 5;
function myFunction() {
document.getElementById("demo").innerHTML = a * a;
} 
</script>
</body>
</html>

프로그램 실행해보기

다음 예에서 a는 전역 변수입니다.

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

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

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

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

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

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

변수 수명 주기

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

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

카운터 딜레마

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

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

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>全局变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var counter = 0;
function add() {
    return counter += 1;
}
function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>

프로그램을 실행하여 사용해 보세요

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

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

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

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
function add() {
    var counter = 0;
    return counter += 1;
}
function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>

프로그램을 실행하여 사용해 보세요

위 코드는 출력되지 않습니다. 정확하게는 add() 함수를 호출할 때마다 카운터가 1로 설정됩니다.

JavaScript 내장 함수를 사용하면 이 문제를 해결할 수 있습니다.

JavaScript 내장 함수

모든 함수는 전역 변수에 접근할 수 있습니다.

사실 JavaScript에서는 모든 함수가 그 위의 범위에 액세스할 수 있습니다.

JavaScript는 중첩 함수를 지원합니다. 중첩된 함수는 상위 수준의 함수 변수에 접근할 수 있습니다.

이 예에서 내장 함수 plus()는 상위 함수의 카운터 변수에 액세스할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>局部变量计数。</p>
<p id="demo">0</p>
<script>
document.getElementById("demo").innerHTML = add();
function add() {
var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}
</script>
</body>
</html

프로그램을 실행하고 시도해 보세요.

외부에서 plus() 함수에 액세스할 수 있으면 카운터 문제를 해결할 수 있습니다 양도 논법.

또한 counter = 0이 한 번만 실행되도록 해야 합니다.

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

JavaScript 클로저

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>

프로그램을 실행해서 사용해 보세요

분석 예

변수 add는 자체 호출 함수의 반환 단어 값을 지정합니다.

자체 호출 기능은 한 번만 실행됩니다. 카운터를 0으로 설정합니다. 함수 표현식을 반환합니다.

add 변수를 함수로 사용할 수 있습니다. 멋진 부분은 함수 위의 범위에서 카운터에 대한 액세스를 제공한다는 것입니다.

이를 JavaScript 클로저라고 합니다. 함수가 개인 변수를 가질 수 있게 해줍니다.

카운터는 익명 함수의 범위로 보호되며 add 메소드를 통해서만 수정할 수 있습니다.

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

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>局部变量计数。</p> <button type="button" onclick="myFunction()">计数!</button> <p id="demo">0</p> <script> var add = (function () { var counter = 0; return function () {return counter += 1;} })(); function myFunction(){ document.getElementById("demo").innerHTML = add(); } </script> </body> </html>

제출하다 코드 재설정

자동운전