이 기사는 JavaScript 폐쇄의 개념과 사용을 분석합니다. 참조를 위해 공유하십시오. 세부 사항은 다음과 같습니다.
폐쇄에 관해서는 모든 사람들이 그들에 대해 들었다고 생각합니다. 아래의 간단한 이해를 말씀 드리겠습니다.
솔직히 말해서, 매일 작업에서 수동으로 클로저를 작성하기위한 시나리오는 많지 않지만 프로젝트에 사용 된 타사 프레임 워크 및 구성 요소는 다소 폐쇄를 사용합니다.
따라서 폐쇄를 이해해야합니다. 헤헤 ...
1. 폐쇄는 무엇입니까?
요컨대, 다른 함수 내부에서 변수를 읽을 수있는 함수입니다.
JS 변수의 범위로 인해 내부 변수에 외부에 액세스 할 수 없으며 외부 변수는 외부 적으로 될 수 있습니다.
2. 시나리오를 사용하십시오
1. 개인 회원 구현.
2. 전 세계 변수 오염을 피하기 위해 네임 스페이스를 보호하십시오.
3. 캐시 변수.
먼저 캡슐화의 예를 살펴 보겠습니다.
다음과 같이 코드를 복사하십시오 : var person = function () {
// 변수의 범위는 함수 내부에 있으며 외부에 액세스 할 수 없습니다.
var name = "기본값";
반품 {
getName : function () {
반환 이름;
},
setName : function (newName) {
이름 = NewName;
}
}
} ();
Console.log (person.name); // 직접 액세스, 결과는 다음과 같습니다
console.log (person.getName ()); // 결과는 다음과 같습니다
console.log (person.setName ( "langjt"));
console.log (person.getName ()); // 결과는 다음과 같습니다. langjt
외부 변수를 참조하는 문제를 해결하기 위해 루프의 일반적인 폐쇄를 살펴 보겠습니다.
코드 사본은 다음과 같습니다. var ali = document.getElementsByTagName ( 'li');
for (var i = 0, len = ali.length; i <len; i ++) {
ali [i] .onclick = function () {
경고 (i); // 어떤 요소를 클릭하든 팝업 값은 LEN이며, 여기에 I의 값과 ift 인쇄 값이 동일하다는 것을 나타냅니다.
};
}
클로저를 사용한 후 :
코드 사본은 다음과 같습니다. var ali = document.getElementsByTagName ( 'li');
for (var i = 0, len = ali.length; i <len; i ++) {
ali [i] .onclick = (function (i) {
return function () {
경고 (i); // 현재 <li> 요소를 클릭하면 해당 첨자가 나타납니다.
}
})(나);
}
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) {
반환 함수 (num) {
Console.log (num);
}
}
var f = 새로운 foo (9);
에프(); // 한정되지 않은
실제로, 위의 사용법을 함수 카레링이라고하며, 이는 여러 매개 변수를 단일 매개 변수 (원래 함수의 첫 번째 매개 변수)를 수용하는 함수로 받아들이고 나머지 매개 변수를 수락하고 결과를 반환하는 새로운 함수를 반환하는 함수를 변환하는 기술입니다. 본질적으로, 그것은 또한 클로저가 캐시 될 수있는 기능을 사용합니다.
다음과 같이 코드를 복사하십시오. var adder = function (num) {
반환 함수 (y) {
Num+Y를 반환합니다.
};
};
var inc = add (1);
var dec = add (-1);
// INC, DEC는 이제 두 가지 새로운 기능으로 매개 변수 값 (+/) 1을 전달하는 데 사용됩니다.
경고 (Inc (99)); // 100
경고 (Dec (101)); // 100
경고 (Adder (100) (2)); // 102
경고 (Adder (2) (100)); // 102
예를 들어, Alibaba Yubo의 SEAJS 소스 코드에서 :
다음과 같이 코드를 복사하십시오 :/**
* util -lang.js- 최소 언어 향상
*/
함수 istype (type) {
반환 기능 (OBJ) {
{} .tostring.call (obj) == "[Object" + type + "]를 반환합니다."
}
}
var isobject = istype ( "object");
var isstring = istype ( "String");
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.