Javascript 클로저 이해_javascript 팁

WBOY
풀어 주다: 2016-05-16 17:17:55
원래의
884명이 탐색했습니다.

클로저는 ECMAScript의 매우 중요한 기능이지만 적절한 정의로 설명하기는 어렵습니다. 클로저를 명확하게 설명하기는 어렵지만 쉽게 만들거나 실수로 만들 수 있습니다. 그러나 클로저의 존재에는 실제로 특정 잠재적인 문제가 있습니다. "우연히" 클로저를 생성하는 것을 방지하고 클로저의 장점을 더 잘 활용하려면 클로저의 메커니즘을 이해하는 것이 필요합니다.

클로저 정의

클로저에 대해서는 정의가 너무 많습니다. 특히 일부 정의는 다음과 같이 매우 추상적입니다.

"클로저 "는 자유 변수를 가질 수 있는 표현식(일반적으로 함수)과 그 변수를 묶는 환경을 함께 묶는 것입니다.

대략 말하면 클로저란 자유 변수를 가지고 이들 변수 실행 환경을 묶는 표현식입니다. 이 정의는 너무 문자 그대로 이해하기 어렵습니다.

또 다른 정의가 있습니다.
모든 함수는 클로저입니다. 이 정의는 저를 많이 혼란스럽게 합니다. 즉, Javascript에는 블록 수준 범위가 없기 때문에 클로저는 일반적으로 함수를 참조합니다(함수 외에 클로저를 구성하는 다른 방법은 생각할 수 없습니다).

여기서 함수와 클로저의 관계에 대해 너무 많이 논의하고 싶지는 않습니다. 이해하기 쉬운 정의를 제시하겠습니다.

우선 클로저의 존재 여부는 스코프 체인을 기반으로 합니다. 범위 체인 메커니즘으로 인해 모든 함수(전역 함수 포함)는 컨텍스트 실행 환경의 변수(예: 자유 변수)를 참조할 수 있습니다.

둘째, 클로저 내부에는 자유 변수가 있어야 합니다. 그런데 변수에는 두 가지 유형이 있습니다. 1. 지역 변수(바운드 변수) 2. 비지역 변수(자유 변수)

마지막으로 컨텍스트가 끝난 후에도 여전히 존재합니다. 즉, 내부 기능은 외부 기능보다 수명주기가 더 깁니다.


클로저 정의 분석에 대해

클로저 정의의 두 가지 사항을 동시에 만족해야 하는지 고민해 왔습니다.

우선 클로저 내부에 자유 변수가 없다면, 즉 외부 변수에 접근하지 않는다면 클로저의 의미가 상실됩니다. (다른 클로저에 의해 동작이 변경되지 않는 한) 따라서 자유 변수는 필수 사항이라고 생각합니다.

둘째, 함수 내부에 자유 변수가 있지만 컨텍스트가 파괴되면 그 변수도 함께 파괴됩니다. 내부 함수가 외부 함수 변수에 액세스하더라도 외부 함수가 실행된 후에 재활용되는 것을 상상할 수 있습니다. 이 경우 클로저에 대한 논의는 의미가 없습니다.


두 가지 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

var objectA = (function() {
        var localA = "localA";

        innerFn();
             //  함수 innerFn( ) {
            localA = "innerChange";
        }

        return {
           getLocalA : function() {
               return "empty";
            }
        };
    })();

    objectA.getLocalA();

    objectA.getLocalA = function() {
        return localA;
    };

//console.log(objectA.getLocalA()); //오류: localA가 정의되지 않았습니다

 
    var objectB = (function() {
        var localB = "localB";

        return {
            getLocalB : function( ) {
                "비어 있음" 반환;
            },

            updateGetLocalB : function() {
               this.getLocalB = function() {
                    localB 반환;
                };
            },

            updateLocalB : function() {
               localB = "changeLocalB";
           }
        };
    })();

    콘솔. log(objectB.getLocalB()); // 비어 있음
       // 通过其他闭包改变
    objectB.updateGetLocalB();

    console.log(objectB.getLocalB()); // localB

    objectB.updateLocalB();

    console.log(objectB.getLocalB()); // 변경LocalB

당신의 삶의 방식

이것과 주장이 일치합니다.

闭包主要的题便是它会保存包含它的函数的작용域,因此比一般函数使更多 内存空间,因此不宜过島使用闭包。

闭包的应用

闭包最基本的应用场景便是模块模式。

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿