자바스크립트 클로저
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 = 4;
function myFunction() {
document.getElementById("demo").innerHTML = a * a;
}
</script>
</body>
</html>인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
a는 전역 변수입니다.
웹페이지의 전역 변수는 window 개체에 속합니다. 전역 변수는 페이지의 모든 스크립트에 적용됩니다. 첫 번째 경우a는 로컬 변수입니다.
지역 변수는 해당 변수가 정의된 함수 내에서만 사용할 수 있습니다. 다른 함수나 스크립트 코드에는 사용할 수 없습니다. 글로벌 변수와 로컬 변수는 이름이 같아도 서로 다른 변수입니다. 하나를 수정해도 다른 값에는 영향을 미치지 않습니다. | 변수 선언은 var<를 사용하지 않는 경우입니다. 🎜> 키워드인 경우 함수 내에서 정의되더라도 전역 변수입니다. |
|---|
변수 수명 주기
전역 변수의 범위는 전역입니다. 즉, 전역 변수는 전체 JavaScript 프로그램의 모든 곳에 있습니다.
함수 내부에 선언된 변수는 함수 내부에서만 작동합니다. 이러한 변수는 지역 변수이고 해당 범위는 지역입니다. 함수의 매개변수도 지역적이며 함수 내에서만 작동합니다.
카운터 딜레마
어떤 값을 계산하고 싶은데 모든 기능에서 카운터를 사용할 수 있다고 상상해 보세요.
전역 변수, 함수를 사용하여 카운터 증분을 설정할 수 있습니다:
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>
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()는 상위 함수의 counter 변수에 액세스할 수 있습니다:
Instance
<!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 메소드를 통해서만 수정할 수 있습니다.
 | 闭包是可访问上一层函数作用域里变量的函数，即便上一层函数已经关闭。 |
|---|
