숙련된 드라이버는 JS 클로저의 다양한 함정을 철저하게 이해하는 데 도움이 될 것입니다.
클로저는 JS 개발에 사용되는 일반적인 기술입니다.
클로저란 다른 함수의 범위에 있는 변수에 액세스할 수 있는 함수를 의미합니다. 명확하게 말하면 클로저는 다른 함수의 범위에 있는 변수에 액세스할 수 있는 함수입니다. 예:
function outer() { var a = '变量1' var inner = function () { console.info(a) } return inner // inner 就是一个闭包函数,因为他能够访问到outer函数的作用域 }
많은 사람들이 익명 함수와 클로저의 관계를 이해하지 못합니다. 실제로 클로저는 범위의 관점에서 정의됩니다. 왜냐하면 내부는 외부 범위의 변수에 액세스하기 때문입니다. 정의는 매우 간단하지만 이 포인터와 변수의 범위 등 함정이 많습니다. 조금만 부주의하면 메모리 누수가 발생할 수 있습니다. 먼저 문제를 제쳐두고 다음 질문에 대해 생각해 봅시다. 클로저 함수가 다른 함수의 범위에 액세스할 수 있는 이유는 무엇입니까?
스택의 관점에서 js 함수를 살펴보세요
기본 변수의 값은 일반적으로 다음과 같습니다. 스택 메모리에 저장되고 객체 유형의 변수 값은 힙 메모리에 저장되고 스택 메모리에는 해당 공간 주소가 저장됩니다. 기본 데이터 유형: 숫자, 부울, 정의되지 않음, 문자열, Null.
var a = 1 //a是一个基本类型 var b = {m: 20 } //b是一个对象
해당 메모리 저장 공간:
b={m:30}을 실행하면 힙 메모리에 새 개체 {m:30}이 있고 스택 메모리의 b는 새 공간 주소를 가리킵니다. ({m:30}을 가리킴), 힙 메모리의 원래 {m:20}은 프로그램 엔진에 의해 가비지 수집되어 메모리 공간을 절약합니다. 우리는 js 함수도 객체이고 힙 및 스택 메모리에도 저장된다는 것을 알고 있습니다. 변환을 살펴보겠습니다.
var a = 1; function fn(){ var b = 2; function fn1(){ console.log(b); } fn1(); } fn();
**
스택은 선입 후출 데이터입니다. 구조:
1이 실행 중입니다. fn 이전에는 전역 실행 환경(브라우저가 창 범위)에 있고 전역 범위에 변수 a가 있습니다.
2가 fn에 들어가면 스택 메모리가 fn의 실행 환경에는 변수 b와 함수 객체 fn1이 있습니다. 여기에는 자체 실행 환경과 전역 실행 환경에서 정의된 변수에 액세스할 수 있습니다.
3 이때 스택 메모리가 푸시됩니다. fn1의 실행 환경에는 다른 변수가 정의되어 있지 않지만 프로그램이 변수에 액세스할 때 기본 스택을 하나씩 검색하므로 fn 및 전역 실행 환경의 변수에 액세스할 수 있습니다. 전역 실행 환경에 해당 변수가 없으면 프로그램에서 미약한 오류가 발생합니다.
4 fn1()이 실행되면 fn1의 실행 환경은 cup에 의해 소멸됩니다. fn()이 실행된 후에는 fn의 실행 환경도 소멸되고 이제 b 변수는 없습니다. , fn1 함수 객체가 있는데, a와 fn만 있습니다(함수 선언 범위는 window 아래에 있음)
**
함수 내에서 변수에 접근하면 함수 범위 체인에 따라 변수 존재 여부가 결정되며, 함수 범위 체인 은 프로그램 함수가 위치한 실행 환경 스택에 따라 초기화되므로 위의 예에서는 fn1에 변수 b를 인쇄하고 fn1의 범위 체인에 따라 fn 실행 환경에 해당하는 변수 b를 찾습니다. . 따라서 프로그램이 함수를 호출하면 다음 작업을 수행합니다. 실행 환경, 초기 함수 범위 체인 및 인수 매개 변수 개체를 준비합니다.
이제 원래 예제 외부 및 내부를 다시 살펴봅니다.
function outer() { var a = '变量1' var inner = function () { console.info(a) } return inner // inner 就是一个闭包函数,因为他能够访问到outer函数的作用域 } var inner = outer() // 获得inner闭包函数 inner() //"变量1"
프로그램이 var inner 실행을 마치면 = 외부(), 실제로 외부의 실행 환경은 파괴되지 않았습니다. 내부의 변수 a가 여전히 내부의 함수 범위 체인에 의해 참조되기 때문입니다. 프로그램이 내부() 실행을 완료하면 실행이 종료됩니다. 내부 및 외부 환경은 파괴되고 호출될 것입니다. "JavaScript Advanced 프로그래밍" 책에서는 다음을 권장합니다. 클로저는 이를 포함하는 함수의 범위를 전달하고 다른 함수보다 더 많은 콘텐츠를 차지하므로 클로저를 과도하게 사용하면 과도한 메모리 사용.
이제 우리는 클로저, 해당 범위 및 범위 체인을 이해하고 다음 주제로 돌아갑니다.
Pit point 1: 참조된 변수는 변경될 수 있습니다
function outer() { var result = []; for (var i = 0; i<10; i++){ result.[i] = function () { console.info(i) } } return result }
결과의 각 클로저 함수는 숫자 1 인쇄에 해당하는 것 같습니다. , 2, 3, 4,..., 10은 실제로는 그렇지 않습니다. 각 클로저 함수에서 액세스하는 변수 i는 루프가 종료됨에 따라 외부 실행 환경의 변수 i가 되기 때문입니다. 따라서 각 클로저가 실행될 때 함수가 실행되면 결과는 10, 10, ..., 10을 인쇄합니다.
이 문제를 해결하는 방법은 무엇입니까?
function outer() { var result = []; for (var i = 0; i<10; i++){ result.[i] = function (num) { return function() { console.info(num); // 此时访问的num,是上层函数执行环境的num,数组有10个函数对象,每个对象的执行环境下的number都不一样 } }(i) } return result }
요점 2: 이것이 문제를 가리킵니다
var object = { name: ''object", getName: function() { return function() { console.info(this.name) } } } object.getName()() // underfined // 因为里面的闭包函数是在window作用域下执行的,也就是说,this指向window
요점 3: 메모리 누수 문제
function showId() { var el = document.getElementById("app") el.onclick = function(){ aler(el.id) // 这样会导致闭包引用外层的el,当执行完showId后,el无法释放 } } // 改成下面 function showId() { var el = document.getElementById("app") var id = el.id el.onclick = function(){ aler(id) // 这样会导致闭包引用外层的el,当执行完showId后,el无法释放 } el = null // 主动释放el }
팁 1: 클로저를 사용하여 재귀 호출 문제 해결
function factorial(num) { if(num<= 1) { return 1; } else { return num * factorial(num-1) } } var anotherFactorial = factorial factorial = null anotherFactorial(4) // 报错 ,因为最好是return num* arguments.callee(num-1),arguments.callee指向当前执行函数,但是在严格模式下不能使用该属性也会报错,所以借助闭包来实现 // 使用闭包实现递归 function newFactorial = (function f(num){ if(num<1) {return 1} else { return num* f(num-1) } }) //这样就没有问题了,实际上起作用的是闭包函数f,而不是外面的函数newFactorial
** 팁 2: 클로저 사용 패키지는 블록 수준 범위를 모방합니다**
es6가 나오기 전에는 var를 사용하여 변수를 정의할 때 변수 승격 문제가 있었습니다. 예:
for(var i=0; i<10; i++){ console.info(i) } alert(i) // 变量提升,弹出10 //为了避免i的提升可以这样做 (function () { for(var i=0; i<10; i++){ console.info(i) } })() alert(i) // underfined 因为i随着闭包函数的退出,执行环境销毁,变量回收
물론 대부분은 이제 es6의 let 및 const를 사용하여 정의됩니다. .
이 기사는 여기서 끝났습니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 JavaScript Video Tutorial 칼럼을 주목하세요!
위 내용은 숙련된 드라이버가 JS 클로저의 다양한 함정을 철저하게 이해하도록 도와줄 것입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!