js 클로저 사용법에 대한 자세한 설명_기본지식

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

1 익명 자체 실행 기능

우리는 모든 변수를 알고 있습니다. var 키워드를 추가하지 않으면 기본적으로 전역 객체의 속성에 추가됩니다. 이러한 임시 변수를 전역 객체에 추가하면 많은 단점이 있습니다.
예를 들어, 다른 함수가 이러한 변수를 오용할 수 있습니다. 전역 객체가 너무 커지고 액세스 속도에 영향을 미칠 수 있습니다(변수 값이 프로토타입 체인에서 이동해야 하기 때문입니다).
변수를 사용할 때마다 var 키워드를 사용하는 것 외에도 실제 상황에서는 이러한 상황이 자주 발생합니다. 즉, 일부 함수는 한 번만 실행하면 되고 해당 내부 변수는 유지 관리할 필요가 없습니다.
예를 들어 UI 초기화의 경우 클로저를 사용할 수 있습니다.

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

var 데이터 모델 = { 
테이블: [],
나무 : {}
};       
(기능(dm){ 
for(var i = 0; i < dm.table.rows; i ){
      var row = dm.table.rows[i];                             for(var j = 0; j              drawCell(i, j);                                                                                             }  
                         
//dm.tree 구축
})(데이터모델)



익명 함수를 만들어서 바로 실행합니다. 그 안에 있는 변수는 외부에서 참조할 수 없기 때문입니다.
따라서 실행 후 곧 해제됩니다. 핵심은 이 메커니즘이 전역 개체를 오염시키지 않는다는 것입니다.

캐시 2개

또 다른 예를 살펴보겠습니다. 처리 시간이 매우 오래 걸리는 함수 개체가 있습니다.

그런 다음 계산된 값을 저장해야 합니다. 이 함수를 호출할 때 먼저 캐시에서 검색한 다음 계산하세요.

그런 다음 캐시를 업데이트하고 값을 반환하면 찾은 값을 직접 반환하면 됩니다. 클로저는 외부 참조를 해제하지 않기 때문에 정확히 이 작업을 수행합니다.

따라서 함수 내부의 값이 보존될 수 있습니다.

코드 복사

코드는 다음과 같습니다.

var CachedSearchBox = (함수(){
var 캐시 = {},
개수 = []
반환 {
AttachSearchBox: 함수(dsid){
If (dsid in 캐시) {// 결과가 캐시에 있는 경우
Return 캐시 [dsid] // 캐시에 있는 객체로 직접 반환
~           var fsb = new uikit.webctrl.SearchBox(dsid);//새  
               캐시[dsid] = fsb;//캐시 업데이트                                                      If (count.length & gt; 100) {// 캐시 캐시 크기 = 100
~                                                                                          캐시 삭제[count.shift()]; ~              fsb 반환;                                                        },                                                      
Clearsearchbox: 함수(dsid) {
If(캐시에 있는 dsid){
캐시[dsid].clearSelection()
~                                                            };   })();
     
CachedSearchBox.attachSearchBox("input1")



이런 식으로 CachedSearchBox.attachSerachBox("input1")를 두 번째로 호출하면
새 검색창 개체를 만들지 않고도 캐시에서 개체를 검색할 수 있습니다.

3 캡슐화 구현

먼저 캡슐화의 예를 볼 수 있습니다. 내부 변수는 사람 외부에서 액세스할 수 없지만 클로저를 제공하여 액세스할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

var 사람 = function(){  //변수 범위는 함수 내부에 있으므로 외부에서 접근할 수 없습니다 변수 이름 = "기본값"                           반환 {           getName : function(){                                                    이름 반환;                                                  },                                                           setName : function(newName){                                                 이름 = newName;                                                                                                           }   }();

     

print(person.name);//직접 액세스, 결과는 정의되지 않음
print(person.getName())
person.setName("abruzzi")
print(person.getName())



결과는 다음과 같습니다.

정의되지 않음
기본값
아브루치

4 클로저의 또 다른 중요한 용도는 객체 지향으로 객체를 구현하는 것입니다. 전통적인 객체 언어는 클래스 템플릿 메커니즘을 제공합니다.
이러한 방식으로 서로 다른 객체(클래스의 인스턴스)는 독립적인 멤버와 상태를 가지며 서로 간섭하지 않습니다. JavaScript에는 클래스와 같은 메커니즘이 없지만 클로저를 사용하면
우리는 그러한 메커니즘을 시뮬레이션할 수 있습니다. 위의 예를 들어보겠습니다.

코드 복사

코드는 다음과 같습니다.

함수 사람(){ 
변수 이름 = "기본값"
                         
반환 {
          getName : function(){                                                    이름 반환;                                                  },                                                           setName : function(newName){                                                 이름 = newName;                                                                                                           }  
};       
     
var 존 = 사람()
인쇄(john.getName())
john.setName("존")
인쇄(john.getName())
     
var 잭 = 사람()
인쇄(jack.getName())
jack.setName("잭")
인쇄(jack.getName())



실행 결과는 다음과 같습니다.

기본값
존
기본값

잭 이 코드에서 볼 수 있듯이 john과 jack은 모두 Person 클래스의 인스턴스라고 할 수 있습니다. 두 인스턴스는 name 멤버에 독립적으로 액세스할 수 있고 서로 영향을 주지 않기 때문입니다.

위는 js 클로저의 기능입니다. 매우 간단하고 이해하기 쉽습니다.