코드는 다음과 같습니다.
var CachedSearchBox = (함수 () {
var 캐시 = {},
count = [];
return {
attachmentSearchBox: 함수 (dsid ) {
( dsid) {//결과가 캐시에 있는 경우
| 🎜> 캐시[dsid] = fsb;//캐시 업데이트
캐시 삭제[count.shift() ];
; if (캐시 내 dsid) {
~ > ;
var obj2 = CachedSearchBox .attachSearchBox("input1");
캡슐화 구현 :
코드 복사
코드는 다음과 같습니다.
var person = function( ){
//변수 범위는 함수 내부에 있으므로 외부에서 접근할 수 없습니다. var name = "default"
return {}();
print(person.name );//직접 액세스, 결과는 정의되지 않음
print(person.getName());
person.setName("jack") ;
print(person.getName());
결과는 다음과 같습니다.
정의되지 않음
default
jack
클로저의 또 다른 중요한 용도는 객체 지향으로 객체를 구현하는 것입니다. 전통적인 객체 언어는 클래스 템플릿 메커니즘을 제공하므로 서로 다른 객체(클래스의 인스턴스)가 서로 간섭하지 않고 독립적인 멤버와 상태를 갖습니다. JavaScript에는 클래스와 같은 메커니즘이 없지만 클로저를 사용하여 이러한 메커니즘을 시뮬레이션할 수 있습니다. 위의 예를 들어보겠습니다.
코드 복사
코드는 다음과 같습니다.
function Person(){
var name = "default";
return {
getName : function(){
return name;
},
setName: function(newName){
name = newName;
}
}
};
var john = Person();
print(john.getName()) ;
john.setName("john");
print(john.getName());
var jack = Person();
print(jack.getName());
jack.setName("jack");
print(jack.getName());
실행 결과는 다음과 같습니다.
default
john
기본
잭
JavaScript 클로저에서 주의해야 할 문제:
1. 메모리 누수:
다른 JavaScript 인터프리터 구현에서는 인터프리터 자체의 결함으로 인해 클로저로 인해 메모리 누수가 발생할 수 있습니다. 메모리 누수는 브라우저의 응답 속도에 심각한 영향을 미치고 사용자 경험을 저하시키며 심지어 브라우저가 응답하지 않게 만드는 심각한 문제입니다. JavaScript 인터프리터에는 일반적으로 참조 계산 형식을 채택하는 가비지 수집 메커니즘이 있습니다. 객체의 참조 카운트가 0이면 가비지 수집 메커니즘이 이를 재활용합니다. 그러나 클로저 개념을 사용하면 이 프로세스가 복잡해집니다. 나중에 로컬 변수를 사용해야 할 수도 있으므로 가비지 수집 메커니즘은 이러한 외부 참조를 처리하지 않습니다. , 객체 A는 B를 참조하고, B는 C를 참조하고, C는 A를 참조하는 경우, 이러한 상황은 가비지 수집 메커니즘에서 해당 참조 횟수가 0이 아니라고 결론을 내리게 되어 메모리 누수가 발생합니다.
2. 상황별 참조:
$(function(){
var con = $("div#panel");
this.id = "content";
con.click(function() {
Alert(this.id);//panel
});
});
여기서 Alert(this.id)는 어떤 값을 의미하나요? 많은 개발자들이 클로저의 개념에 따라 잘못된 판단을 내릴 수 있습니다:
content
this.id에는 클릭 콜백에 표시되는 값이 할당되어 클로저가 이를 참조하게 됩니다. .id이므로 반환 값은 content입니다. 그러나 실제로 이 경고는 "패널"을 팝업으로 표시합니다. 클로저가 로컬 변수를 참조할 수 있지만 호출 개체의 존재로 인해 상황이 약간 미묘해집니다. 클로저가 호출되면(이 패널의 클릭 이벤트가 발생할 때) 여기서는 jQuery 개체 con을 참조합니다. 익명 함수의 this.id = "content"는 익명 함수 자체에 대해 수행되는 작업입니다. this 참조 두 개는 동일한 개체를 참조하지 않습니다.
이벤트 핸들러에서 이 값에 액세스하려면 다음과 같이 몇 가지 사항을 변경해야 합니다.
$(function(){
var con = $("div#panel");
this.id = "content" ;
var self = this;
con.click(function(){
Alert(self.id);//content
});
});
이런 식으로 우리가 이벤트 처리 함수에 저장하는 것은 this가 아닌 외부 로컬 변수 self에 대한 참조입니다. 이 기술은 많은 실제 적용이 가능하며 다음 장에서 자세히 논의할 것입니다. 클로저에 대해서는 다른 명령형 언어에서의 "클로저" 논의, 실제 프로젝트에서의 클로저 적용 등을 포함하여 9장에서 자세히 논의할 것입니다.
첨부: 제 수준의 한계로 인해 글에 누락이나 오류가 있을 수 있으며, 언어 자체가 부적절할 수 있으니 시기적절한 수정과 제안을 환영합니다. 이 기사는 다른 사람들에게 영감을 주기 위한 것입니다. 모두 감사합니다!