Successfully reported this slideshow.

JavaScript closure & scope

1,550 views

Published on

JavaScript closure & scope

Published in: Technology
  • Be the first to comment

JavaScript closure & scope

  1. 1. 자바스크립트의 클로져와 스코프 고대준 (kkode1911@gmail.com)
  2. 2. 왜? • 이벤트에 많이 사용되는 클로져. • Node.js는 이벤트를 이용한다. 무척 많이. • 클로져를 이해하기 위해서는 스코프에 대한 이해가 필요.
  3. 3. 변수 • 값 타입의 데이터 • • 숫자, 문자열, 불린, undefined, null 참조 타입의 데이터 • 숫자, 문자열, 불린, undefined, null을 제외한 모든것
  4. 4. 변수 범위 • C, C++, Java등 일반적 언어에서 변수 범위는 {} 이다. • 자바스크립트 변수 범위는 함수이다.
  5. 5. 프로그램 실행 단계 • 프로그램 • 파싱 • • 변수, 함수 정의 실행 • 변수 대입, 제어문, 함수호출 • * 함수 코드 파싱
  6. 6. 파싱 단계 • 변수와 함수를 정의한다. • 3Line: myFun 변수가 undefined로 정의. • 5~8Line: myFun 함수가 정의, 3Line myFunc의 변 수를 덮어쓴다.
  7. 7. 실행 단계 • 1Line: myFun 함수가 호출, “local variable” 출력 • 3Line: myFun에 “overwrite” 대입 • myFun이 가리키고 있던 함수는 가비지 컬렉션으로 간다. • 10Line: “overwrite” 출력 • 메소드와 프로퍼티는 실행시 판단된다.
  8. 8. 함수 Scope • 함수 내부 속성에는 [[SCOPE]]라는 속성이 있다. • [[SCOPE]]는 우리가 접근 할 수 없다. • ECMA-262에서 정의
  9. 9. myFun [[SCOPE]]
  10. 10. Scope Chain • 함수 안의 [[SCOPE]]가 가리킨다. • 객체 배열이다. • 각 배열에는 변수 객체를 가리킨다.
  11. 11. myFun [[SCOPE]] Scope Chain 0
  12. 12. Variable Object • 변수 항목을 키-값 쌍 형태로 포함한다. • 함수가 만들어질때, 같이 만들어진다.
  13. 13. Global Object [[SCOPE]] Scope Chain 0 this window window myFun (object) document (object) myFun (function) … …
  14. 14. Execution Context • 자바스크립트에서 스코프를 아리송하게 하는놈 • 파싱 단계와 실행단계의 스코프 차이를 만든다. • 실행시 함수 스코프를 복사한후 자신만의 스코프 체인에 Activation Object을 추가한다. • 함수 실행할 때마다 Execution Context가 만들어진다.
  15. 15. var result = myFun(‘closure’); execution context ! Scope Chain Scope Chain 0 1 Activation Object this window arguments [name] name “closure” msg undefined Global Object this window window (object) document (object) myFun (function) result undefined … …
  16. 16. 퀴즈 undefined
  17. 17. 클로져? • 음~~~~ ㅡㅡ; • 예제로 Go
  18. 18. 클로져 예제 Global Object this window 파싱 window (object) document (object) outer (function) closure1 undefined … …
  19. 19. 클로져 예제(1) outer 함수의
 스코프체인 Global Object this outer [[SCOPE]] Scope Chain 0 window window (object) document (object) outer (function) closure1 undefined … …
  20. 20. 클로져 예제(2) 8Line 실행 Activation Object this window arguments [num] num 1 innerFun (function) Global Object this var closure1 = outer(1); Execution Context Scope Chain window window (object) 0 document (object) 1 outer (function) closure1 undefined … … Scope Chain
  21. 21. 클로져 예제(3) innerFun의 스코프체인 var closure1 = outer(1); Execution Context Scope Chain Scope Chain [[SCOPE]] Global Object 0 this window 1 window (object) document (object) outer (function) closure1 undefined … … Scope Chain innerFun Activation Object (outer) this window arguments [num] num 1 innerFun (function) 0 1
  22. 22. 클로져 예제(4) Activation Object (closure) this arguments 9Line 실행 console.log(closure1()); Execution Context Scope Chain Scope Chain 0 1 2 window [] Activation Object (outer) this window arguments [num] num 1 innerFun (function) Global Object this window window (object) document (object) outer (function) closure1 (function) … …
  23. 23. 클로져 예제(5) Activation Object (closure) this arguments 10Line 실행 console.log(closure1()); Execution Context Scope Chain Scope Chain 0 1 2 window [] Activation Object (outer) this window arguments [num] num 2 innerFun (function) Global Object this window window (object) document (object) outer (function) closure1 (function) … …
  24. 24. 퀴즈(1)
  25. 25. 자바스크립트의 모든 함수 는 클로져다!
  26. 26. 참고 • 자바스크립트 객체지향 프로그래밍 • High Performance JavaScript • JavaScript The Good Parts • JavaScript The Definitive Guide 5/E
  27. 27. 감사합니다.

×