Javascript 클로저 사용 예 분석_javascript 기술

이 글은 자바스크립트 클로저의 개념과 사용법을 예시를 통해 분석합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

폐쇄에 관해서는 모두가 들어본 적이 있을 것입니다.
솔직히 말해서 클로저가 일상 업무에서 실제로 수동으로 작성되는 시나리오는 많지 않지만 프로젝트에 사용되는 타사 프레임워크와 구성 요소는 클로저를 어느 정도 사용합니다.
따라서 클로저를 이해하는 것이 매우 필요합니다. 하하...

1. 폐쇄란 무엇인가

간단히 말하면 다른 함수의 내부 변수를 읽어올 수 있는 함수입니다.
JS 변수 범위의 특성상 내부 변수는 외부에서 접근이 불가능하고, 외부 변수는 내부에서 접근이 가능합니다.

2. 사용 시나리오

1. 비공개 멤버를 구현합니다.
2. 네임스페이스를 보호하고 전역 변수를 오염시키지 마십시오.
3. 캐시 변수.

먼저 캡슐화의 예를 살펴보겠습니다.

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

var person = function() {
//변수의 범위는 함수 내부에 있으므로 외부에서 접근할 수 없습니다
변수 이름 = "기본값";

반환 {
          getName: 함수 () {
              이름 반환;
},
setName: 함수(newName) {
              이름 = newName;
}
}
}();

console.log(person.name); // 직접 액세스, 결과는 정의되지 않음
console.log(person.getName()); // 결과는 다음과 같습니다: default
console.log(person.setName("langjt"));
console.log(person.getName()); // 결과는 다음과 같습니다: langjt

외부 변수 참조 문제를 해결하기 위해 루프에서 일반적으로 사용되는 클로저를 살펴보세요.

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

var aLi = document.getElementsByTagName('li');
for (var i=0, len=aLi.length; i aLi[i].onclick = function() {
Alert(i); // 어떤

요소를 클릭하더라도 나타나는 값은 len입니다. 이는 여기의 i 값이 for 이후에 인쇄된 i 값과 동일함을 나타냅니다.
};
}

클로저 사용 후:

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

var aLi = document.getElementsByTagName('li');
for (var i=0, len=aLi.length; i aLi[i].onclick = (함수(i) {
반환 함수() {
Alert(i); // 이때

요소를 클릭하면 해당 첨자가 나타납니다.
}
})(i);
}

3. 주의사항

1. 메모리 누수

클로저를 사용하면 함수의 모든 변수가 메모리에 저장되어 많은 메모리를 소비하므로 클로저를 남용할 수 없습니다. 그렇지 않으면 웹 페이지에서 성능 문제가 발생할 수 있습니다.
예:

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

function foo() {
var oDiv = document.getElementById('J_DIV');
var id = oDiv.id;
oDiv.onclick = function() {
// Alert(oDiv.id); 여기에는 순환 참조가 있으며, IE 낮은 버전 페이지가 닫힌 후에도 oDiv는 여전히 메모리에 있습니다. 따라서 가능하면 객체 대신 기본 유형을 캐시하세요.
​​ 알림(id);
};
oDiv = null;
}

2. 변수 명명

내부 함수의 변수 이름과 외부 함수의 변수 이름이 동일한 경우 내부 함수는 더 이상 외부 함수의 이름이 같은 변수를 가리킬 수 없습니다.
예:

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

function foo(num) {
반환 함수(숫자) {
console.log(숫자)
}
}
var f = new foo(9);
f(); // 정의되지 않음

사실 위 사용법, 즉 전문용어인 함수 커링은 여러 매개변수를 받는 함수를 단일 매개변수(원래 함수의 첫 번째 매개변수)를 받아들이고 나머지 매개변수를 반환하는 함수로 변환하는 것입니다. . 매개변수를 취하고 결과를 반환하는 새로운 함수 기술입니다. 기본적으로 다음과 같은 클로저의 캐싱 기능도 활용합니다.

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

var adder = function(num) {
반환함수(y) {
          숫자 y를 반환합니다.
};
};

var inc = adder(1);
var dec = 가산기(-1);
//inc, dec는 이제 두 개의 새로운 함수이며, 해당 함수는 전달된 매개변수 값을 변환하는 것입니다(/‐)1
경고(inc(99));//100
경고(dec(101));//100
경고(adder(100)(2));//102
경고(adder(2)(100));//102

또 다른 예는 Ali Yubo의 seaJS 소스 코드입니다.

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

/**
 * util-lang.js - 최소한의 언어 향상
 */
함수 isType(유형) {
반환 함수(obj) {
Return {}.toString.call(obj) == "[object " type "]"
}
}

var isObject = isType("Object");
var isString = isType("String");

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.