집 >웹 프론트엔드 >JS 튜토리얼 >예제를 통해 클로저 이해에 대한 간략한 분석

예제를 통해 클로저 이해에 대한 간략한 분석

零到壹度원래의: 2018-04-02 10:47:391346검색

이 기사는 클로저에 대한 간략한 이해를 공유합니다. 내용이 꽤 좋습니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

스코프 체인

클로저를 더 명확하게 이해하려면 먼저 스코프 체인을 이해해야 합니다. 클로저를 훨씬 쉽게 이해할 수 있습니다.

스코프 체인은 다양한 가변 저장 공간을 가리키는 목록으로 일반적으로 창의 가변 환경으로 둘러싸여 있습니다.

각 실행 환경의 [[scope]] 속성은 범위 체인에 대한 참조를 저장합니다.

var name = "tianci";

위 코드 실행이 끝나면 브라우저의 window.name 속성은 "tianci"입니다. 이때 window[[scope]]가 가리키는 범위 목록이 가리키는 변수 공간의 이름은 " tianci"가 존재합니다

var name = "tianci";
function sy() {
    var name = "haha";
    console.log(name);
}
sy();//haha

이 코드에서 sy()를 실행하면 sy 실행 환경의 [[scope]]가 가리키는 범위 목록이 먼저 창의 범위 목록을 자신의 목록에 복사한 다음 sy 변수 공간을 범위 목록의 선두(즉, list.[0]의 위치)에 삽입됩니다. name이 실행되면 최상위 변수 환경까지 0->1 -> 2 ->3... 목록에서 name 변수가 쿼리됩니다.

var name = "tianci";
function sy() {
    var name = "haha";
    console.log(name);
    console.log(this.name);
}
sy();

//haha
//tianci

두 출력이 다릅니다

log(name)일 때 함수 sy는 먼저 자신의 환경에서 이름을 찾으므로 haha

log(this.name)을 출력할 때 sy의 this는 window(브라우저에서)를 가리킵니다. 따라서 쿼리는 이름을 검색하기 위해 창 환경에서 시작되므로 출력은 tianci

1입니다. 범위 체인은 여러 개체 저장 공간을 가리키는 목록입니다.

2. 호출자의 범위 체인을 자신의 범위 체인에 복사한 다음 연결된 목록의 선두에 자신의 범위를 삽입합니다.

클로저

클로저의 개념은 이해하기 어렵지 않습니다. 함수 범위에 변수가 있는 함수를 만드는 것은 Hanfu 내부에 다음과 같은 또 다른 함수를 만드는 것입니다.

function cC(property) {
    return function (obj1,obj2) {        var value1 = obj1[property]
        var value2 = obj2[property]
        if (value1 < value2) {
            return -1;
        }else if(value1 > value2){
            return 1;
        }else if(value1 == value2){
            return 0;
        }
    }
}

여기서 호출 함수의 변수 속성은 클로저인 익명 함수에서 액세스됩니다

하지만 클로저 문제, 즉 cC가 실행된 후 익명 함수가 종료되지 않으면 cC의 환경 활성 개체는 익명 함수가 실행된 후에만 삭제됩니다. 따라서 클로저로 인해 불필요한 메모리 누수가 발생하는 경우가 있습니다.

보통 익명 함수의 this 개체는 (브라우저에서) 창을 가리킵니다.

반환된 익명 함수를 얻을 때 일반적으로 전역 환경에서 직접 호출되므로 다음과 같습니다. 그 시간에 창을 가리킬 것입니다.

var name = "chentainci";
var obj ={
    name:"myboj",
    getName:function () {
        return function () {
            return this.name
        }
    }
}
console.log(obj.getName()())

Closure는 변수의 최종 값을 가져옵니다.

function fun() {
    var result =new Array();
    for (var i  = 0;i  < 10; i++) {
        result[i] = function () {
            return i
        }
    }
    return result;
}

result는 i의 최종 값인 함수의 반환 값을 저장합니다. 10

예제를 통해 클로저 이해에 대한 간략한 분석

스코프 체인

클로저

관련 기사