다우기술 사내 발표자료 Javascript Context, Prototype 작동원리

1. 자바스크립트 작동원리
크롬 V8엔진 작동 방식

2. 자바 자바스크립트

3. 인도 인도네시아

4. 사자 바다사자

5. 자바
팽이
붕어
햄
자바프라푸치노
달팽이
붕어빵
햄스터

6. “세상에서 가장 오해받고 있는 프로그래밍 언어”

7. React VR

8. React Native

9. Electron

10. 그냥 this때문에 멘붕와서

11. 실행 컨텍스트
(Execution Context)
“실행 가능한 코드를 형상화하고 구별하는 추상적인 개념”

12. 실행 컨텍스트
(Execution Context)
“실행 가능한 코드를 형상화하고 구별하는 추상적인 개념”
(Executable Code)

13. 실행 컨텍스트
(Execution Context)
“실행 가능한 코드를 형상화하고 구별하는 추상적인 개념”
(Executable Code)
Global Code
Function Code
Eval Code

14. 실행 컨텍스트
(Execution Context)

15. Global Global Global Global Global
foo() foo() foo()
bar()
Execution Context
Execution Context
Execution Context
Execution Context
Execution Context
Execution Context
Execution Context
Execution Context Execution Context
실행 컨텍스트
(Execution Context)

16. 실행 컨텍스트
(Execution Context)
활성 객체
(Activation Object)
변수 객체
(Variable Object)
스코프 체인
(Scope Chain)
this value
변수
매개변수
(Parameters)
함수 선언
(Function Declaration)
인수
(Arguments)

17. Global Global Global Global Global
foo() foo() foo()
bar()
Execution Context
Execution Context
Execution Context
Execution Context
Execution Context
Execution Context
Execution Context
Execution Context Execution Context
실행 컨텍스트
(Execution Context)

18. 실행 컨텍스트
(Execution Context)

19. GO
1. Global Code에의 진입

20. Global
Execution Context
VO
SC
this
GO
1. Scope Chain의 생성과 초기화
2. Variable Instantiation실행
3. this value결정
1. Global Code에의 진입

21. Global
Execution Context
VO
SC
this
GO
1. Scope Chain의 생성과 초기화
2. Variable Instantiation실행
3. this value결정
0
1. Global Code에의 진입

22. Global
Execution Context
VO
SC
this
GO
1. Scope Chain의 생성과 초기화
2. Variable Instantiation실행
3. this value결정
0
1. Global Code에의 진입

23. Global
Execution Context
VO
SC
this
GO
1. Scope Chain의 생성과 초기화
2. Variable Instantiation실행
3. this value결정
0
1. Global Code에의 진입

24. Global
Execution Context
VO
SC
this
0
foo [[scope]] 0 GO
GO
1. Scope Chain의 생성과 초기화
2. Variable Instantiation실행
3. this value결정
1. Global Code에의 진입

25. Global
Execution Context
VO
SC
this
0
foo
x ‘undefined’
[[scope]] 0 GO
GO
1. Scope Chain의 생성과 초기화
2. Variable Instantiation실행
3. this value결정
1. Global Code에의 진입

26. Global
Execution Context
VO
SC
this
0
foo
x ‘undefined’
[[scope]] 0 GO
GO
1. Scope Chain의 생성과 초기화
2. Variable Instantiation실행
3. this value결정
1. Global Code에의 진입

27. Global
Execution Context
VO
SC
this
0
foo
x ‘xxx’
[[scope]] 0 GO
GO
1. 변수값 대입
2. 함수 foo의 실행
2. Global Code의 실행

28. Global
Execution Context
VO
SC
this
0
foo
x ‘xxx’
[[scope]] 0 GO
foo
Execution Context
VO
SC
this
GO
2. Global Code의 실행
1. 변수값 대입
2. 함수 foo의 실행

29. Global
Execution Context
VO
SC
this
0
foo
x ‘xxx’
[[scope]] 0 GO
foo
Execution Context
VO
SC
this
GO
2. Global Code의 실행
1. Scope Chain의 생성과 초기화
2. Variable Instantiation실행
3. this value결정
0
AO
1

30. Global
Execution Context
VO
SC
this
0
foo
x ‘xxx’
[[scope]] 0 GO
foo
Execution Context
VO
SC
this
GO
2. Global Code의 실행
1. Scope Chain의 생성과 초기화
2. Variable Instantiation실행
3. this value결정
0
AO
1

31. Global
Execution Context
VO
SC
this
0
foo
x ‘xxx’
[[scope]] 0 GO
foo
Execution Context
VO
SC
this
GO
2. Global Code의 실행
1. Scope Chain의 생성과 초기화
2. Variable Instantiation실행
3. this value결정
0
AO
1
bar [[scope]]
GO
0
1
AO

32. Global
Execution Context
VO
SC
this
0
foo
x ‘xxx’
[[scope]] 0 GO
foo
Execution Context
VO
SC
this
GO
2. Global Code의 실행
1. Scope Chain의 생성과 초기화
2. Variable Instantiation실행
3. this value결정
0
AO
1
bar [[scope]]
GO
0
1
AO
y ‘undefined’

33. Global
Execution Context
VO
SC
this
0
foo
x ‘xxx’
[[scope]] 0 GO
foo
Execution Context
VO
SC
this
GO
2. Global Code의 실행
1. Scope Chain의 생성과 초기화
2. Variable Instantiation실행
3. this value결정
0
1
[[scope]]
GO
0
1
AO
AO
bar
y ‘undefined’

34. Global
Execution Context
VO
SC
this
0
foo
x ‘xxx’
[[scope]] 0 GO
foo
Execution Context
VO
SC
this
GO
3. foo function code의 실행
0
1
[[scope]]
GO
0
1
AO
AO
bar
y ‘yyy’

35. Global
Execution Context
VO
SC
this
0
foo
x ‘xxx’
[[scope]] 0 GO
foo
Execution Context
VO
SC
this
GO
3. foo function code의 실행
0
1
[[scope]]
GO
0
1
AO
AO
bar
y ‘yyy’
bar
Execution Context
VO
SC
this

36. Global
Execution Context
VO
SC
this
0
foo
x ‘xxx’
[[scope]] 0 GO
foo
Execution Context
VO
SC
this
GO
3. foo function code의 실행
0
1
[[scope]]
GO
0
1
AO_foo
AO_foo
bar
y ‘yyy’
bar
Execution Context
VO
SC
this
AO_bar
0

37. Global
Execution Context
VO
SC
this
0
foo
x ‘xxx’
[[scope]] 0 GO
foo
Execution Context
VO
SC
this
GO
3. foo function code의 실행
0
1
[[scope]]
GO
0
1
AO_foo
AO_foo
bar
y ‘yyy’
bar
Execution Context
VO
SC
this
AO_bar
0
1
2

38. Global
Execution Context
VO
SC
this
0
foo
x ‘xxx’
[[scope]] 0 GO
foo
Execution Context
VO
SC
this
GO
3. foo function code의 실행
0
1
[[scope]]
GO
0
1
AO_foo
AO_foo
bar
y ‘yyy’
bar
Execution Context
VO
SC
this
AO_bar
0
1
2
z ‘undefined’

39. Global
Execution Context
VO
SC
this
0
foo
x ‘xxx’
[[scope]] 0 GO
foo
Execution Context
VO
SC
this
GO
3. foo function code의 실행
0
1
[[scope]]
GO
0
1
AO_foo
AO_foo
bar
y ‘yyy’
bar
Execution Context
VO
SC
this
AO_bar
0
1
2
z ‘undefined’

40. Global
Execution Context
VO
SC
this
0
foo
x ‘xxx’
[[scope]] 0 GO
foo
Execution Context
VO
SC
this
GO
3. bar function code의 실행
0
1
[[scope]]
GO
0
1
AO_foo
AO_foo
bar
y ‘yyy’
bar
Execution Context
VO
SC
this
AO_bar
0
1
2
z ‘zzz’

41. 실행 컨텍스트
(Execution Context)

42. Lexical Scpoing

43. 실행 컨텍스트
(Execution Context)

44. 실행 컨텍스트
(Execution Context)

45. 호이스팅!
(Hoisting)

46. 함수 컨텍스트
(Execution Context)

47. 함수 컨텍스트
(Execution Context)

48. 호이스팅!
(Hoisting)

49. 호이스팅!
(Hoisting)

50. 호이스팅!
(Hoisting)

51. 호이스팅!
(Hoisting)

52. 클로저
(Closure)

53. 클로저
(Closure)

54. 클로저
(Closure)

55. Chrome V8

56. 자바스크립트
인터프리터 ? 컴파일러?

57. 소스 프로그램
어휘 분석
구문 분석
중간 코드 생성
최적화
코드 생성
목적 프로그램
소스 프로그램
어휘 분석
내부 코드 생성
구문 분석 실행
Compiler Interpreter

58. JITC(Just-In-Time-Compiler)
소스코드를 그대로 메모리에 유지한 채 라인단위로 해석,
실행시점에 원시코드나 중간코드를 네이티브 코드로 변환

59. JS Source IR
(Intermediate Representation)
Native Code
Parser &
IR Generator
Just-In-Time
Compiler

60. Hot Spot(반복 수행구간)이 적기 때문에 Interpreter와 별 차이가 없다.

61. Adaptive JIT Compilation
모든 코드를 일괄적으로 같은 수준의 최적화를 적용하는것이 아니라
반복되는 수행 정도에 따라 유동적으로 다른 최적화 수준을 적용

62. 모든 코드는 처음에 Interpreter로 수행
자주 반복되는 부분(hotspot)이 발견되면 그 부분만 JITC
처음에는 최소한의 최적화만 적용하는 JITC(Baseline-JITC)
더 자주 반복되는 코드에는 더 많은 최적화를 사용하는 JITC(Optimizing-JITC)