JavaScript에서 클로저는 어떻게 작동하나요?
- WBOY앞으로
- 2023-08-24 21:05:04869검색
이 글에서는 “Closures”에 대해 알아보고 이것이 JavaScript에서 실제로 어떻게 작동하는지 알아보겠습니다. 클로저는 기본적으로 주변 상태(어휘 환경라고도 함)에 대한 참조를 포함하는 함수의 구성입니다.
JavaScript에서는 기본적으로 런타임에 함수가 생성될 때마다 클로저가 생성됩니다. 즉, 클로저는 내부적으로 사용되는 외부적인 것을 기억하는 화려한 이름일 뿐입니다.
몇 가지 예를 통해 JavaScript 클로저를 이해해 봅시다. -
예제 1 h2>
다음 예에서는 궁극적으로 외부 함수에서 외부 변수 tagLine에 대한 액세스를 활성화하는 클로저를 선언합니다.
가장 안쪽 함수에서 외부 사용 변수에 따라 이 특정 클로저는 외부 함수가 호출될 때마다 사용자가 tagLine에 경고하는 데 도움이 됩니다.
#파일 이름: index.html
<!DOCTYPE html>
<html>
<head>
<title>
Closures in Javascript
</title>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<button type="button" onclick="init()">
Click here!!!
</button>
<p id="demo"></p>
<script>
function init() {
var tagLine = "Start your Learning journey now";
function display() { // display() is the inner function, a closure
alert(tagLine); // use variable declared in the parent function
}
display();
}
</script>
</body>
</html>Output
이 결과는 다음과 같습니다.
예제 2
아래 예에서는 중첩된 클로저를 사용하여 두 함수를 호출하고 동일한 함수의 출력을 표시합니다.
#파일 이름: index.html
<!DOCTYPE html>
<html>
<head>
<title>
Closures in Javascript
</title>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<button type="button" onclick=" Counter()">
Click Me!
</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function Counter() {
var counter = 0;
function outerfunction() {
counter += 1;
document.getElementById("demo1").innerHTML
= "Outer Counter called = " + counter +" from Outer Function " ;
function innerfunction() {
counter += 1;
document.getElementById("demo2").innerHTML
= "Inner Counter called = " + counter +" from Inner Function ";
};
innerfunction();
};
outerfunction();
};
</script>
</body>
</html>Output
위 내용은 JavaScript에서 클로저는 어떻게 작동하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제