JavaScript에서 클로저는 어떻게 작동하나요?-JS 튜토리얼-php.cn

JavaScript에서 클로저는 어떻게 작동하나요?

WBOY

풀어 주다： 2023-08-24 21:05:04

앞으로

926명이 탐색했습니다.

이 글에서는 “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

이 결과는 다음과 같습니다.

JavaScript 中的闭包是如何工作的？

예제 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>

로그인 후 복사