JavaScript 클로저의 자세한 그래픽 코드를 이해하는 데 1분 정도 걸립니다.-JS 튜토리얼-php.cn

JavaScript 클로저의 자세한 그래픽 코드를 이해하는 데 1분 정도 걸립니다.

黄舟

풀어 주다： 2017-03-08 14:14:34

원래의

1091명이 탐색했습니다.

클로저란 무엇인가요?

먼저 코드를 살펴보세요.

function a(){
    var n = 0;
    function inc() {
        n++;
        console.log(n);
    }
    inc();  
    inc(); 
}
a(); //控制台输出1，再输出2

로그인 후 복사

간단합니다. 코드를 다시 살펴보겠습니다.

function a(){
    var n = 0;
    this.inc = function () {
        n++; 
        console.log(n);
    };
}
var c = new a();
c.inc();    //控制台输出1
c.inc();    //控制台输出2

로그인 후 복사

간단합니다.

폐쇄란 무엇인가요? 이것이 종결이다!

다른 함수 범위에 있는 변수에 접근할 수 있는 함수를 클로저라고 합니다. 여기서 inc 함수는 생성자 a의 변수 n에 액세스하므로 클로저가 형성됩니다.

코드를 다시 살펴보세요:

function a(){
    var n = 0;
    function inc(){
       n++; 
       console.log(n);
    }
    return inc;
}
var c = a();
c();    //控制台输出1
c();    //控制台输出2

로그인 후 복사

실행 방법을 살펴보세요.

var c = couter(), 이 문장 couter()는 inc 함수를 반환합니다. , 이 문장은 var c = inc;

c()와 동일하고, 이 문장은 inc()와 동일합니다. 함수 이름은 단지 식별자(함수에 대한 포인터)이며 ( )는 실행 함수입니다.

다음 세 문장의 번역은 다음과 같습니다. var c = inc(); inc(); 첫 번째 코드와 다른가요? 아니요.

폐쇄란 무엇인가요? 이것이 종결이다!

모든 교과서 자습서에서는 마지막 단락을 사용하여 클로저를 설명하는 것을 좋아하지만 이것이 문제를 복잡하게 한다고 생각합니다. 여기서 반환되는 것은 함수 이름입니다. Tan Haoqiang의 C/C++ 프로그래밍을 본 적이 없는 학생들은 ()를 사용하는 것과 사용하지 않는 것의 차이를 즉시 깨닫지 못할 수도 있습니다. 이 방법이 더 우아하기는 하지만 여전히 문제를 단순화하고 싶습니다. 코드 1과 코드 2를 살펴보세요. 아직도 함수 호출에 어려움을 겪고 있나요?

왜 이렇게 쓰나요?

우리는 js의 각 기능이 외부 정보를 얻을 수 있는 작은 암실이라는 것을 알고 있지만 외부 세계는 내부 내용을 직접 볼 수 없습니다. 변수 n을 작은 검은 방에 넣는다. inc 함수 외에는 변수 n에 접근할 수 있는 다른 방법이 없다. 게다가, 함수 a 외부에서 변수 n을 정의해도 서로 영향을 주지 않는 것이 소위 향상된 것이다. "캡슐화".

함수 식별자 inc를 반환하기 위해 return을 사용하는 이유는 inc 함수를 a 함수 외부에서 직접 호출할 수 없기 때문에 return inc가 외부에 연결되어 있기 때문입니다. 밖의. .

Common Traps

이것을 보세요:

function createFunctions(){
    var result = new Array();
    for (var i=0; i < 10; i++){
        result[i] = function(){
            return i;
        };
    }
    return result;
}
var funcs = createFunctions();
for (var i=0; i < funcs.length; i++){
    console.log(funcs[i]());
}

로그인 후 복사

처음에는 0~9가 출력될 줄 알았는데 10 10이 출력될 줄은 전혀 예상하지 못하셨나요?

여기서 함정은 다음과 같습니다. ()가 있는 함수는 실행 함수입니다! var f = function() { 경고('Hi') }; 의 간단한 문장은 창을 띄우지 않습니다. f(); 문장이 뒤따를 때만 함수 내부의 코드가 실행됩니다. 위 코드의 번역은 다음과 같습니다.

var result = new Array(), i;
result[0] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
result[1] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
...
result[9] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
i = 10;
funcs = result;
result = null;

console.log(i); // funcs[0]()就是执行 return i 语句，就是返回10
console.log(i); // funcs[1]()就是执行 return i 语句，就是返回10
...
console.log(i); // funcs[9]()就是执行 return i 语句，就是返回10

로그인 후 복사

왜 결과만 수집되고 i는 수집되지 않나요? 왜냐하면 i는 여전히 함수에 의해 참조되기 때문입니다. 레스토랑과 마찬가지로 접시는 항상 한정되어 있으므로 웨이터는 빈 접시를 수집하기 위해 테이블을 순찰하지만 야채가 담긴 접시를 어떻게 감히 수집합니까? 물론, 접시 위의 접시를 수동으로 비우면(=null) 접시가 치워지는 것이 소위 메모리 재활용 메커니즘입니다.

i의 가치가 어떻게 유지될 수 있는지는 사실 글의 처음부터 끝까지 읽어보시면 걱정하실 필요가 없습니다. 한 조각 먹고 나면 접시에 있는 음식 한 조각이 빠져야 하는 것 아닌가?

요약하자면

클로저는 다른 함수의 변수를 참조하는 함수이므로 해당 변수를 참조하므로 재활용되지 않으므로 프라이빗 변수를 캡슐화하는 데 사용할 수 있습니다. . 이는 장점이자 단점입니다. 불필요한 클로저는 메모리 소비만 증가시킵니다. 또한, 클로저를 사용할 때에는 정적 프라이빗 변수와 같기 때문에 변수의 값이 요구 사항을 충족하는지 여부에도 주의해야 합니다. 클로저는 일반적으로 많은 것들과 혼동됩니다. 클로저를 접해야만 더 깊은 이해를 할 수 있습니다.

위 내용은 JavaScript 클로저의 자세한 그래픽 코드를 이해하는 데 1분 정도 걸립니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!