폐쇄의 목적을 살펴 보겠습니다. 사실, 클로저를 사용함으로써 많은 일을 할 수 있습니다. 예를 들어, 객체 지향 코드 스타일을 시뮬레이션합니다. 더 우아하고 간결하게 코드를 표현하십시오. 일부 측면에서 코드 실행 효율성을 향상시킵니다.
1 익명 자체 이행 함수
모든 변수가 VAR 키워드와 함께 추가되지 않으면 기본값이 글로벌 오브젝트의 속성에 추가됩니다. 이러한 임시 변수를 글로벌 객체에 추가하는 데는 많은 단점이 있습니다.
예를 들어 : 다른 기능은 이러한 변수를 오용 할 수 있습니다. 전역 객체가 너무 커지고 액세스 속도에 영향을 미치게합니다 (변수의 값이 프로토 타입 체인에서 통과해야하기 때문에).
변수를 사용할 때마다 VAR 키워드를 사용하는 것 외에도 일부 기능을 한 번만 실행하면 내부 변수를 유지할 필요가없는 상황이 종종 발생합니다.
예를 들어 UI 초기화에서 클로저를 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
var datamodel = {
테이블 : [],
나무 : {}
};
(기능 (dm) {
for (var i = 0; i <dm.table.rows; i ++) {
var row = dm.table.rows [i];
for (var j = 0; j <row.cells; i ++) {
DrawCell (I, J);
}
}
// 빌드 dm.tree
}) (Datamodel);
익명의 함수를 생성하고 외부가 그 안에 변수를 참조 할 수 없으므로 즉시 실행합니다.
따라서 실행 직후에 릴리스됩니다. 핵심은이 메커니즘이 글로벌 객체를 오염시키지 않는다는 것입니다.
2 캐시
또 다른 예를 들어 봅시다. 각 통화를 처리하는 데 시간이 오래 걸리는 시간이 많이 걸리는 기능 객체가 있다고 상상해보십시오.
그런 다음 계산 된 값을 저장해야합니다. 이 함수를 호출 할 때 먼저 캐시를 찾아 봅니다. 찾을 수없는 경우 계산을 수행합니다.
그런 다음 캐시를 업데이트하고 값을 반환하십시오. 발견되면 찾은 값을 직접 반환하십시오. 폐쇄는 외부 참조를 공개하지 않기 때문에 정확히이를 수행합니다.
따라서 함수 내부의 값은 보존 될 수 있습니다.
코드 사본은 다음과 같습니다.
var cachedsearchbox = (function () {
var cache = {},
count = [];
반품 {
att
if (dsid in cache) {// 결과가 캐시에있는 경우
캐시를 반환 [dsid]; // 캐시의 객체로 직접 돌아갑니다
}
var fsb = new uikit.webctrl.searchbox (dsid); // new
캐시 [dsid] = fsb; // 캐시 업데이트
if (count.length> 100) {// 캐시의 크기가 보장됩니다 <= 100
캐시 삭제 [count.shift ()];
}
반환 FSB;
},
ClearSearchbox : function (dsid) {
if (캐시에서 dsid) {
캐시 [dsid] .clearSelection ();
}
}
};
}) ();
CachedSearchbox.attachsearchbox ( "input1");
이런 식으로 CachedSearchbox.attachserachbox ( "Input1")를 두 번째로 호출하면
새 SearchBox 객체를 작성하지 않고도 캐시에서 객체에 액세스 할 수 있습니다.
3 포장 구현
먼저 캡슐화에 대한 예를 살펴 보겠습니다. 내부의 변수는 사람 외부에서 액세스 할 수 없지만 폐쇄를 제공하여 액세스 할 수 있습니다.
코드 사본은 다음과 같습니다.
var person = function () {
// 변수의 범위는 함수 내부에 있으며 함수 외부에서 액세스 할 수 없습니다.
var name = "기본값";
반품 {
getName : function () {
반환 이름;
},
setName : function (newName) {
이름 = NewName;
}
}
} ();
print (person.name); // 직접 액세스, 결과는 정의되지 않습니다
print (person.getName ());
person.setname ( "Abruzzi");
print (person.getName ());
결과는 다음과 같습니다.
한정되지 않은
기본
아브루지
4 클로저의 또 다른 중요한 목적은 객체 지향 객체를 구현하는 것입니다. 전통적인 객체 언어는 클래스 템플릿 메커니즘을 제공합니다.
이런 식으로, 다른 물체 (클래스의 인스턴스)에는 독립적 인 구성원과 상태가 있으며 서로를 방해하지 않습니다. 폐쇄를 사용하여 JavaScript 클래스와 같은 메커니즘은 없지만
우리는 그러한 메커니즘을 시뮬레이션 할 수 있습니다. 위의 예에 대해 이야기 해 봅시다.
코드 사본은 다음과 같습니다.
기능인 () {
var name = "기본값";
반품 {
getName : function () {
반환 이름;
},
setName : function (newName) {
이름 = NewName;
}
}
};
var John = person ();
print (john.getName ());
John.SetName ( "John");
print (john.getName ());
var jack = person ();
print (jack.getname ());
jack.setname ( "잭");
print (jack.getname ());
작업 결과는 다음과 같습니다.
기본
남자
기본
잭
이 코드에서, 우리는 John과 Jack이 사람 클래스의 인스턴스라고 할 수 있음을 알 수 있습니다.
위의 것은 JS 폐쇄의 기능으로 매우 간단하고 이해하기 쉽습니다. 친구들에게 도움이되기를 바랍니다.