자바스크립트 클로저

클로저란 무엇입니까

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

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

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

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

클로저를 작성하고 사용하는 여러 방법

첫 번째 작성 방법

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
    <script type="text/javascript">  
          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());   
    </script>  
</head>  
<body>  
</body>
</html>

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

두 번째 작성 방법

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
    <script type="text/javascript">  
       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 ) );  
    </script>  
</head>  
<body>  
</body>
</html>

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

세 번째 작성 방법

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
    <script type="text/javascript">  
       var Circle = new Object();  
            Circle.PI = 3.14159;  
            Circle.Area = function( r ) {  
             return this.PI * r * r;  
            }  
           alert( Circle.Area( 1.0 ) );  
    </script>  
</head>  
<body>  
</body>
</html>

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

글쓰기 네 번째 방법

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
    <script type="text/javascript">  
         var Circle={  
           "PI":3.14159,  
            "area":function(r){  
               return this.PI * r * r;  
              }  
           };  
          alert( Circle.area(1.0) );  
    </script>  
</head>  
<body>  
</body>
</html>

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

Javascript 클로저의 목적

사실 클로저를 사용하면 많은 일을 할 수 있습니다. 예를 들어, 객체 지향 코딩 스타일을 시뮬레이션할 수 있으며, 코드를 더욱 우아하고 간결하게 표현하고 일부 측면에서 코드의 실행 효율성을 향상시킵니다.

1. 익명 자체 실행 기능

2. 결과 캐싱

3. 구현 클래스 및 상속

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<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">
<title>php中文网(php.cn)</title>
</head>
<body>
<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 메소드를 통해서만 수정할 수 있습니다.

클로저란 상위 함수가 닫혀 있어도 상위 함수 범위 내의 변수에 접근할 수 있는 함수입니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function buildFunctions(){ var funcArr = []; for(var i = 0; i < 3; i++){ funcArr.push((function(j){ return function(){ console.log(j); }; }(i))); } return funcArr; } var fs = buildFunctions(); fs[0](); //0 fs[1](); //1 fs[2](); //2 </script> </head> <body> <p>请在浏览器中点击 F12 来观察结果</p> </body> </html>

제출하다 코드 재설정

자동운전