A slidedeck for presentation about 'You don't know JS'

1. You don’t know JS 2
- Chapter1. this or That?
- Chapter2. this All makes sense now!
20180818 1주차 스터디 / 권기웅

2. Part 1. this라나 뭐라나🤔

3. this를 쓰면 좋와용

4. this를 안쓰고 context 객체를 명시할 수도 있어요

7. this라나 뭐라나🤔
하지만!
“뒷부분에서 객체와 프로토타입을 배우고 나면
여러 함수가 적절한 콘텍스트 객체를 자동 참조하는 구조가
얼마나 편리한지 실감하게 될 것이다”

8. this라나 뭐라나🤔
하지만!
“뒷부분에서 객체와 프로토타입을 배우고 나면
여러 함수가 적절한 콘텍스트 객체를 자동 참조하는 구조가
얼마나 편리한지 실감하게 될 것이다”
좋다니까 일단…

9. 우리가 this에게 헷갈리는 것들🤔

10. 우리가 this에게 헷갈리는 것들🤔
자기 자신일거야

11. 우리가 this에게 헷갈리는 것들🤔
자기 자신일거야
자신의 스코프일거야

12. 우리가 this에게 헷갈리는 것들🤔
자기 자신일거야
자신의 스코프일거야
대충 Java의 this같겠지 뭐 🐶

13. 우리가 this에게 헷갈리는 것들🤔
자기 자신일거야
대충 Java의 this같겠지 뭐 🐶

14. 우리가 this에게 헷갈리는 것들🤔
자기 자신일거야

15. 우리가 this에게 헷갈리는 것들🤔
자기 자신일거야

16. 우리가 this에게 헷갈리는 것들🤔
자기 자신일거야
this = 함수 그 자체

17. this = 함수 그 자체

18. this = 함수 그 자체
this는 함수 자체니까 this.count == foo.count

19. this = 함수 그 자체
this는 함수 자체니까 this.count == foo.count
foo에 count 프로퍼티 생성

20. this = 함수 그 자체
this는 함수 자체니까 this.count == foo.count
하지만 증가하지 않아따…
foo에 count 프로퍼티 생성

21. 렉시컬 스코프를 통해 우회하는 방법

22. 렉시컬 스코프를 통해 우회하는 방법
전역스코프에 data Object 생성

23. 렉시컬 스코프를 통해 우회하는 방법
전역스코프에 data Object 생성
전역 스코프의 data Object의
count 프로퍼티 증가

24. 렉시컬 스코프를 통해 우회하는 방법
전역스코프에 data Object 생성
전역 스코프의 data Object의
count 프로퍼티 증가
// 4

25. 렉시컬 스코프를 통해 우회하는 방법2

26. 렉시컬 스코프를 통해 우회하는 방법2
전역 스코프에 있는 foo 기명함수에
count 프로퍼티 생성

27. 렉시컬 스코프를 통해 우회하는 방법2
전역 스코프에 있는 foo 기명함수에
count 프로퍼티 생성
foo 함수의 count 프로퍼티 값 증가

28. 렉시컬 스코프를 통해 우회하는 방법2
전역 스코프에 있는 foo 기명함수에
count 프로퍼티 생성
foo 함수의 count 프로퍼티 값 증가
// 4

29. 렉시컬 스코프로 우회했다?
간단하게 얘기하자면 전역 스코프를 활용했다는 의미

30. 어렵지 않아요 우회하지 마세요🐶

31. 어렵지 않아요 우회하지 마세요🐶
call 메서드는 모든 함수 객체에 prototype으로 존재하며
인자는 (this로 사용할 값[, arg1 [, arg2[, …]]])

32. 어렵지 않아요 우회하지 마세요🐶
call 메서드는 모든 함수 객체에 prototype으로 존재하며
인자는 (this로 사용할 값[, arg1 [, arg2[, …]]])
this = foo

33. 우리가 this에게 헷갈리는 것들🤔
자기 자신일거야
자신의 스코프일거야
대충 Java의 this같겠지 뭐 🐶

34. 우리가 this에게 헷갈리는 것들🤔
자기 자신일거야
자신의 스코프일거야

35. 우리가 this에게 헷갈리는 것들🤔
자신의 스코프일거야

36. 우리가 this에게 헷갈리는 것들🤔
자신의 스코프

37. 우리가 this에게 헷갈리는 것들🤔
자신의 스코프
this = 함수의 렉시컬 스코프

38. this가 암시적으로 함수의 렉시컬 스코프를 가리키도록..

39. this가 암시적으로 함수의 렉시컬 스코프를 가리키도록..
여기까지는 도달하지 않아요ㅠㅠ

40. this가 암시적으로 함수의 렉시컬 스코프를 가리키도록..
여기까지는 도달하지 않아요ㅠㅠ
this.bar는 아직 함수가 아니기 때문에 TypeError!
호이스팅과 관련있을것 같습니다

41. this는 자기 자신도 아니고,
함수의 스코프도 아니다
그렇다면 this는?

42. this는 😎
작성 시점이 아닌 런타임 시점에 바인딩
함수 선언 위치와 상관없이 this 바인딩은
오로지 어떻게 함수를 호출했느냐에 따라 정해집니다

43. 함수를 호출하면 이런게 생김
Activation Record = Execution Context
이 때, this 에 대한 정보도 결정됨

44. 알고싶다 Activation Record…🙄

45. 알고싶다 Activation Record…🙄
야크털 깎는중…(60%)

46. Activation Record?
= 실행 콘텍스트(Execution context)

47. Activation Record?
활성 레코드는 함수가 호출되는 시점에 생성되며, 함수가 실행될 때 필요한 정보를 가지고 있다
Activation Record(=Execution Context)

48. Activation Record?
활성 레코드는 함수가 호출되는 시점에 생성되며, 함수가 실행될 때 필요한 정보를 가지고 있다
Activation Record(=Execution Context)
Variable
Objects
변수(변수, 함수…)
매개변수 정보
내부 함수 정보

49. Activation Record?
활성 레코드는 함수가 호출되는 시점에 생성되며, 함수가 실행될 때 필요한 정보를 가지고 있다
Activation Record(=Execution Context)
Variable
Objects
변수(변수, 함수…)
매개변수 정보
내부 함수 정보
[[Scopes]]
전역
현재 함수 스코프
…

50. Activation Record?
활성 레코드는 함수가 호출되는 시점에 생성되며, 함수가 실행될 때 필요한 정보를 가지고 있다
Activation Record(=Execution Context)
Variable
Objects
변수(변수, 함수…)
매개변수 정보
내부 함수 정보
[[Scopes]]
전역
현재 함수 스코프
…
this
호출시점에 따라
결정되는 this 값

51. 우리는 Activation Record 생성시의
this 값을 결정하는 부분을 배우는 중🤗

52. Part 2. this가 이런거로군!👌

53. this 바인딩은 런타임에 호출부에 의해 정해진다고 하니..
baz 함수의 호출부는? / call stack은?
bar 함수의 호출부는? / call stack은?
foo 함수의 호출부는? / call stack은?
baz 함수를 실행하는 현재의 call stack은?

54. this 바인딩은 런타임에 호출부에 의해 정해진다고 하니..
bar 함수의 호출부는? / call stack은?
foo 함수의 호출부는? / call stack은?
baz 함수를 실행하는 현재의 call stack은?

55. this 바인딩은 런타임에 호출부에 의해 정해진다고 하니..
foo 함수의 호출부는? / call stack은?
baz 함수를 실행하는 현재의 call stack은?

56. this 바인딩은 런타임에 호출부에 의해 정해진다고 하니..
baz 함수를 실행하는 현재의 call stack은?

57. this 바인딩은 런타임에 호출부에 의해 정해진다고 하니..