숙련된 드라이버가 JS 클로저의 다양한 함정을 철저하게 이해하도록 도와줄 것입니다.-JS 튜토리얼-php.cn

숙련된 드라이버는 JS 클로저의 다양한 함정을 철저하게 이해하는 데 도움이 될 것입니다.

클로저는 JS 개발에 사용되는 일반적인 기술입니다.

클로저란 다른 함수의 범위에 있는 변수에 액세스할 수 있는 함수를 의미합니다. 명확하게 말하면 클로저는 다른 함수의 범위에 있는 변수에 액세스할 수 있는 함수입니다. 예:

function outer() {
     var  a = &#39;变量1&#39;
     var  inner = function () {
            console.info(a)
     }
    return inner    // inner 就是一个闭包函数，因为他能够访问到outer函数的作用域
}

로그인 후 복사

많은 사람들이 익명 함수와 클로저의 관계를 이해하지 못합니다. 실제로 클로저는 범위의 관점에서 정의됩니다. 왜냐하면 내부는 외부 범위의 변수에 액세스하기 때문입니다. 정의는 매우 간단하지만 이 포인터와 변수의 범위 등 함정이 많습니다. 조금만 부주의하면 메모리 누수가 발생할 수 있습니다. 먼저 문제를 제쳐두고 다음 질문에 대해 생각해 봅시다. 클로저 함수가 다른 함수의 범위에 액세스할 수 있는 이유는 무엇입니까?

스택의 관점에서 js 함수를 살펴보세요

기본 변수의 값은 일반적으로 다음과 같습니다. 스택 메모리에 저장되고 객체 유형의 변수 값은 힙 메모리에 저장되고 스택 메모리에는 해당 공간 주소가 저장됩니다. 기본 데이터 유형: 숫자, 부울, 정의되지 않음, 문자열, Null.

var  a = 1   //a是一个基本类型
var  b = {m: 20 }   //b是一个对象

로그인 후 복사

해당 메모리 저장 공간:

숙련된 드라이버가 JS 클로저의 다양한 함정을 철저하게 이해하도록 도와줄 것입니다.

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();

로그인 후 복사

숙련된 드라이버가 JS 클로저의 다양한 함정을 철저하게 이해하도록 도와줄 것입니다.

스택은 선입 후출 데이터입니다. 구조:

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 = &#39;变量1&#39;
     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: &#39;&#39;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 중국어 웹사이트의 기타 관련 기사를 참조하세요!