Day 11. Event Loop

prototype REVIEW

  생성자 함수(constructor)는 남편

  프로토타입(prototype)은 아내

  던더 프로토(__proto__)는 엄마

ken.toString();

// 모든 자바스크립트 객체는 자신에게 없는 속성은 자신의 엄마에게 가서 훔쳐씁니다.

// ken에게는 toString이라는 메소드가 없습니다. 그래서 엄마에게(Person.prototype) 부탁해봅니다.

// 켄의 엄마에게도 없습니다. 켄의 엄마는 자바스크립트 객체입니다.

// 그렇기 때문에 켄의 엄마도 자신의 엄마(Object.prototype)에게 부탁해봅니다.

// Object.prototype에는 toString이 있습니다.

// 그리하여 켄은 외할머니의 toString을 훔쳐옵니다.

Example #1

#106 코드가 실행되면 Array.prototype에서 logMe Method를 찾지만 찾을 수 없기 때문에 그 Object.prototype으로 넘어가서 한번 더 찾게 되고,  Object.prototype에 해당 Method가 있기 때문에 실행된다. 따라서 arr.logMe(); 는 ( 3, 2)가 된다. 

Example #2

#153에서 Person 함수를 실행하면 빈 객체가 생성되고 그 빈객체에 logMe라는 속성을 만들어주고 그 값으로 함수를 할당하고 있다. (만들어서) 따라서 #163, #164 코드를 실행하면 함수를 각각, 2번 만든다. 

결과적으로 p가 가진 logMe함수와 k가 가진 logMe 함수는 다른 것이다.

반면, #159에서는 protype에 logMe함수를 하나 만들어 놓고 공동사용 하는 것이다.

Example #3

#189에서 Bar.prototype이라는 값을 foo로 재할당 해버렸다. 그렇기 때문에 #190은 foo.sayHello와 마찬가지이다. 

때문에 foo.sayHello라는 method가 만들어졌기 때문에 실행된다.

Example #4

Event Loop

• Single-threaded
• V8 Engine                크롬에서 사용하는 Javascript 엔진
• Call Stack
• Callback Queue
• Asynchronous
• Web API

Stack

밑에서부터 쌓는 구조이고, 빠질때는 위에서부터 빠진다. 중간에 쌓거나 중간에서 뺄 수 없다. 

CallStack

현재 실행되는 프로그램들이 스택 구조에 저장되는 것입니다. 

함수들이 실행되는 스택이라고 생각하면 된다. 

• 함수가 실행되면 스택에 들어갑니다.
• 함수가 종료되면 스택에서 빠져나갑니다. 

setTimeout 은 브라우저에서 제공해주는 기능이다. 

Callback Queue

나중에 실행될 함수

줄 서 있는 구조

늦게 들어온 사람이 먼저 나가는 Stack과 달리 먼저 들어온 사람이 먼저 나간다.

Stack 구조 실습 사이트

주기적으로 확인하는 과정을 EventLoop이라 한다. 

CallStack이 비어야 EventLoop이 확인해서 Callback Queue에 있는 함수들을 순차적으로 실행한다. 

Web Api에서 실행시킨 뒤에 Callback Queue에 들어가기 때문에 만약 setTimeout에서 시간을 달리 한다면 시간에 따라 Callback Queue에 들어가는 순서가 뒤바뀔 수 있다. 

setTimeout의 시간이 0으로 되더라도 CallStack이 비어야 Callback Queue에 있는 함수가 실행되기 때문에 후순위로 밀려난다.

CallStack은 싱글스레드, 브라우저는 멀티스레드이다.