자바스크립트 클로저

JavaScript 클로저

클로저란 무엇입니까

클로저에 대한 공식적인 설명은 다음과 같습니다. 많은 변수를 갖는 표현식(보통 함수)과 이러한 변수를 바인딩하는 환경이므로 이러한 변수도 일부입니다. 표현의. 클로저의 특징:

　1. 함수 변수에 대한 참조로 함수 반환 시 활성화됩니다.

　 2. 클로저는 함수가 반환될 때 리소스를 해제하지 않는 스택 영역입니다.

　 간단히 말해서 Javascript는 내부 함수의 사용을 허용합니다. 즉, 함수 정의와 함수 표현식은 다른 함수의 함수 본문에 위치합니다. 또한 이러한 내부 함수는 모든 지역 변수, 매개변수 및 해당 함수가 존재하는 외부 함수에 선언된 기타 내부 함수에 액세스할 수 있습니다. 이러한 내부 함수 중 하나가 이를 포함하는 외부 함수 외부에서 호출되면 클로저가 형성됩니다.

2. 클로저를 작성하고 사용하는 여러 가지 방법

먼저 JS의 모든 것은 객체이고 함수도 객체의 한 유형이라는 것을 이해해야 합니다. 먼저 클로저를 작성하는 5가지 방법을 살펴보고 클로저가 무엇인지 간략하게 이해해 보겠습니다. 이에 대해서는 나중에 자세히 설명하겠습니다.

//첫 번째 작성 방법

function Circle(r) {  
      this.r = r;  
}  
Circle.PI = 3.14159;  
Circle.prototype.area = function() {  
  return Circle.PI * this.r * this.r;  
}  
var c = new Circle(1.0);     
alert(c.area());

이 작성 방법은 특별한 것이 아니며 함수에 몇 가지 속성을 추가할 뿐입니다.

//두 번째 작성 방법

var Circle = function() {  
   var obj = new Object();  
   obj.PI = 3.14159;       
   obj.area = function( r ) {  
       return this.PI * r * r;  
   }  
   return obj;  
}    
var c = new Circle();  
alert( c.area( 1.0 ) );

이 작성 방법은 변수를 선언하고 변수에 함수를 값으로 할당하는 것입니다.

//세 번째 작성 방법

var Circle = new Object();  
Circle.PI = 3.14159;  
Circle.Area = function( r ) {  
       return this.PI * r * r;  
}  
alert( Circle.Area( 1.0 ) );

이 방법이 가장 잘 이해되는데, 새 개체를 만든 다음 해당 개체에 속성과 메서드를 추가하는 것입니다.

//글쓰기 4번째 방법

var Circle={  
   "PI":3.14159,  
 "area":function(r){  
          return this.PI * r * r;  
        }  
};  
alert( Circle.area(1.0) );

이 방법은 일반적으로 많이 사용되며 가장 편리합니다. var obj = {}는 빈 객체를 선언합니다.

//다섯 번째 작성 방법

var Circle = new Function("this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI;}")

Alert ( (new Circle()).area(1.0) )

솔직히 저는 이 작성 방법을 사용해본 적이 없으니 참고하시면 됩니다.

일반적으로 위의 방법들 중 2번과 4번이 더 많이 나오며, 습관에 따라 선택하시면 됩니다.

위 코드에는 JS에서 흔히 사용하는 프로토타입이 나오는데 프로토타입의 용도는 무엇일까요? 살펴보겠습니다:

  var dom = function(){    
    };
    dom.Show = function(){
        alert("Show Message");
    }; 
    dom.prototype.Display = function(){
        alert("Property Message");
    };
    dom.Display(); //error
    dom.Show();  
    var d = new dom();
    d.Display();
    d.Show(); //error

변수 수명 주기

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

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

카운터 딜레마

몇 가지 값을 계산하고 싶은데 모든 기능에서 카운터를 사용할 수 있다고 상상해 보세요.

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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() 함수가 호출되지 않더라도 페이지의 모든 스크립트가 카운터를 변경할 수 있다는 것입니다.

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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">
</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이 한 번만 실행되도록 해야 합니다.

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

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </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>

제출하다 코드 재설정

자동운전