자바스크립트에서 클로저...

4333 단어 corejavascript

  • 함수는 어휘 환경/범위(해당 로컬+상위 범위)와 함께 바인딩됩니다.
      function x(){
    var a = 7;
    function y(){
      console.log(a)
    }
    y(); 
  }
  x();

  # output
  7

  # debugger for line 
  # console.log(a) 
  Closure(x)
  a:7

  • 함수 내에서 함수 반환
      function x(){
    var a = 7;
    function y(){
      console.log(a)
    }
    return y; 
  }
  let res = x();
  console.log(res);

  # output
  F:y(){
    console.log(a);
  }

  • x()에서 반환된 후 x는 호출 스택에서 완전히 사라졌지만 여전히 y()는 클로저에서 관련된 변수와 함수를 기억합니다.
    # the inner function remembers the binding variables and the functions due to closure and even after the function that calls inner function gets vanished from call stack the inner fnction will remember the refferences to the outer function.

function x(){
    var a = 7;
    function y(){            
      console.log(a)     
    }
    return y; 
  }
  let res = x();
  res();

  OR

  function x(){
    var a = 7;
    return function y(){            
      console.log(a);     
    } 
  }
  let res = x();
  res();

  # output
  7
  • 따라서 내부 함수가 다른 함수 내에서 반환될 때마다 실제로 내부 함수 + 어휘 범위의 클로저를 반환하고 부모에 대한 참조를 기억합니다

  • 클로저에 대한 몇 가지 출력 예측 질문
      function x(){
    var a = 7;
    function y(){            
      console.log(a);     
    }
    a = 100;
    return y; 
  }
  let res = x();
  res();

  # output
  100
  • 반환할 때 내부 함수는 상위 범위/어휘 범위 변수의 참조(원래 주소)도 반환하고 값을 변경하면 위의 코드
    • 와 같이 상위 범위 변수도 직접 변경된다는 것을 기억하십시오.

  • 다단계 폐쇄
      function z(){
    var b = 900;  
    function x(){
      var a = 7;            
      function y(){
        console.log(a,b);
      }     
    y();
    }
    x();
  }
  z();

  # debugger at console.log(a,b)
  Closure (x)
  a:7
  Closure (z)
  b:900

    • 클로저 사용


  • 모듈 디자인 패턴
  • 카레
  • 한 번과 같은 기능
  • 메모이즈
  • 비동기 세계에서 상태 유지
  • setTimeouts
  • 반복자



    • setTimeout + 클로저 인터뷰 질문



            function x(){
          var i = 1;
          setTimeout(function(){
            console.log(i);
          },3000)
        }
        x();

        # output
        # prints 1 after 3 second from 
        # the time the x is called
        1

        function x(){
        var i = 1;
        setTimeout(function(){
          console.log(i);
        },3000);
        console.log("olaaa");
      }
      x();

      # output
      olaaa
      #after 3 seconds
      1
  • 조수, 시간 및 자바 스크립트는 아무도 기다리지 않는다는 것을 기억하십시오

  • 까다로운 질문 문제는 1이 1초 후에 인쇄되어야 하는 것과 같이 1에서 5까지의 숫자를 인쇄하는 것입니다. 2는 2초 후에 인쇄해야 합니다.
        function x(){
    for(var i=1;i<=5;i++){
      setTimeout(function(){
      console.log(i);
    },i * 1000);
    }
    console.log("olaaa");
  }
  x();

  # output
  olaaa
  6
  6
  6
  6
  6
  • 위의 코드는 setTimeout 콜백이 console.log(i)가 실행될 때까지 i의 메모리 공간을 참조하기 때문에 클로저로 인해 이러한 출력을 제공합니다. 이제 log(i)가 실행하여 6을 인쇄합니다.

  • 이 문제를 해결하기 위해 var 대신 let을 사용할 수 있습니다. let은 블록 범위가 있고 루프가 실행될 때마다 i는 완전히 새로운 변수입니다. 즉, i의 새 복사본이 만들어집니다. 즉, let을 사용할 때 변경된 i 값마다 다른 메모리 위치가 사용됩니다.
      function x(){
    for(let i=1; i <= 5; i++){
      setTimeout(function(){
      console.log(i);
    },i * 1000);
}
    console.log("olaaa");
}
x();

# output
olaaa
1
2
3
4
5

  • 클로저를 통해 let을 사용하지 않는 중요한 솔루션, 즉 함수를 만들고 그 안에 setTimeout을 넣어 innerfunction이 호출될 때마다 i에 대한 새로운 메모리 위치를 생성합니다.
      function x(){
  for(var i=1; i <= 5; i++){
    # making a explicit closure for setTimeout
    function close(i){
      setTimeout(function(){
          console.log(i);
        },i * 1000);
    }
  # we are calling the close()  function with new copy of i  different memory location
  close(i);
  }
  console.log("olaaa");
    }
    엑스();
      # output
  olaaa
  1
  2
  3
  4
  5

    • 내 친구 좋은 하루 보내세요!!
    전문가: Android 앱의 Huawei 키트(계정, 지도, ID)와 함께 RxAndroid 및 MVVM을 사용하는 의사 상담.
    Golang - 팁 대화

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage