[7주차] 23장 실행 컨텍스트

1. 소스 코드의 타입

 

ECMA 스크립트 

4가지 타입 소스 코드 --> 실행 컨텍스트 생성

전역 코드	전역에 존재하는 소스코드 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다	전역 코드는 전역 스코프를 생성한다. 전역 변수(var), 전역 함수(함수선언문)를 전역 객체의 프로퍼티와 메서드로 바인딩 한다.  전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다.
함수 코드	함수 내부에 존재하는 소스코드 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다	함수 코드는 지역 스코프를 생성한다 지역변수, 매개변수, arguments 객체를 관리한다 지역 스코프를 전역 스코프와 체인으로 연결한다. 함수 코드가 평가되면 함수 실행 컨텍스트가 생성된다.
eval 코드	빌트인 전역 함수 eval 함수에 인수로 전달되어 실행되는 소스코드	eval 코드는 strict mode에서 자신만의 독자적인 스코프를 생성한다. eval 코드가 평가되면 eval 실행 컨텍스트가 생성된다.
모듈 코드	모듈 내부에 존재하는 소스코드 모듈 내부의 함수, 클래스 등의 내부 코드는 포함되지 않는다.	모듈코드는 모듈별로 독립적인 모듈 스코프를 생성한다. 모듈 코드가 평가되면 모듈 실행 컨텍스트가 생성된다.

 

 

소스코드를 4가지로 나눈 이유

소스코드 타입에 따라 실행 컨텍스트를 생성하는 과정, 내용이 다르다.

 

 

eval 코드?

https://www.youtube.com/watch?v=eAAxma2f4fM

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/eval

eval 함수

결과

 

2. 소스코드의 평가와 실행

소스코드 -------> 평가 --------> 실행

           평가과정       실행과정

 

1) 평가과정:

실행 컨텍스트를 생성한다. 

변수, 함수 선언문만 먼저 실행 --> 생성된 변수, 함수 식별자 key --> 실행컨텍스트가 관리하는 스코프에 등록한다.

 

2) 실행과정:

선언문을 제외한 소스코드가 순차적으로 실행됨(런타임) --> 소스코드 실행에 필요한 정보를 스코프에서 검색해서 취득 --> 변수 값의 변경, 소스코드의 실행결과는 실행 컨텍스트가 관리하는 스코프에 등록한다.

 

1) 평가 과정:

 var x; 실행함.

변수 식별자 x는 실행 컨텍스트가 관리하는 스코프에 등록한다.

x = undefined 로 초기화.

 

2) 실행 과정:

x=1; 만 실행된다.

x 변수가 선언 된 변수라면 값을 할당하고 --> 할당 결과를 --> 실행 컨텍스트가 관리하는 스코프에 등록한다.

x 변수에 값을 할당하려면 x변수가 선언된 변수인지 확인한다.

실행 컨텍스트가 관리하는 스코프에 x 변수가 등록되어 있는지 확인한다.

       있으면: 1) 평가과정에서 선언문이 실행되어 등록된 변수임

 

 

3. 실행 컨텍스트의 역할

실행 컨텍스트?

코드의 실행 순서

 

아래 예시를 보면

전역, 함수, 

소스 코드	1) 평가 과정	2) 실행 과정
전역 코드	선언문만 먼저 실행 변수 선언문, 함수 선언문 전역 변수, 전역 함수가 실행 컨텍스트가 관리하는 전역 스코프에 등록됨 전역 객체의 프로퍼티, 메서드가 됨	런타임 시작 전역 코드 순차적 실행됨 전역 변수에 값이 할당 됨
함수 코드	함수 호출에 의해 함수 내부로 진입한다 함수 내부 문을 실행하기 전에! 매개변수, 지역변수 선언문이 먼저 실행된다. 매개변수, 지역변수가 실행 컨텍스트가 관리하는 지역 스코프에 등록된다. 함수 내부에서 지역변수처럼 사용할 수 있는 arguments 객체가 생성되어 지역스코프에 등록된다. this 바인딩도 결정한다.	런타임 시작 함수 코드 순차적 실행됨 매개변수, 지역변수에 값이 할당된다. console.log 호출된다 console을 스코프 체인을 통해 검색한다 console은 스코프 체인에 등록X 전역 객체의 프로퍼티다. log는 console객체의 프로토타입 체인을 통해 검색한다.  인수로 전달된 표현식 a+x+y가 평가된다.

 

함수 호출이 종료되면 함수 호출 이전으로 돌아가기 위해 
현재 실행 중인 코드와 이전에 실행하던 코드를 구분하여 관리해야한다.

스코프(렉시컬 환경) >>>>>>> 식별자(렉시컬 환경) >>>>>>>>>코드(실행 컨텍스트 스택)   

실행 순서로 관리가 필요하다. --> 관리하는 것이 실행 컨텍스트다.

실행 컨텍스트:

1) 소스 코드를 실행하는 데 필요한 환경을 제공한다.

2) 실행 결과를 실제로 관리하는 영역이다.

3) 식별자(변수, 함수, 클래스 등의 이름)을 등록-관리 하는 스코프

4) 코드 실행 순서관리를 구현한 내부 메커니즘

6) 모든 코드는 실행 컨텍스트를 통해 실행되고 관리 된다.

 

 

 

4. 실행 컨텍스트 스택

빨강: 전역 , 파랑: 함수, 초록: 함수 내 함수

평가: 전역 코드 평가 -> 전역 실행 컨텍스트 생성 -> 실행 컨텍스트 스택 푸쉬

실행: 전역변수 x에 값 할당됨, 전역 함수 foo() 호출됨.

 

 전역 함수 foo() 호출 --> 전역 코드 실행: 일시 중지 --> foo() 함수로 제어권 이동

 

평가: 내부 함수 코드를 평가함 -> foo함수 실행 컨텍스트 생성 -> 실행 컨텍스트 스택 푸쉬

지역변수 y, 중첩함수 bar가 foo 함수 실행 컨텍스트에 등록됨

실행: 지역변수 y 값 할당됨, 중첩 함수 bar() 호출됨.

 

 중첩 함수 bar()호출 --> foo() 함수 코드 실행: 일시 중지 --> bar() 함수 제어권 이동

 

평가:  함수 내부의 함수 코드를 평가함 -> foo() 실행 컨텍스트 생성 -> 실행 컨텍스트 스택 푸쉬

지역 변수 z가 bar() 함수 실행컨텍스트에 등록됨.

실행: 지역변수 z에 값이 할당됨, console.log() 메서드 호출, bar()함수 종료

 

bar() -> foo()함수로 제어권 이동 -> 실행 컨텍스트에서 팝 -> foor함수 종료

전역 코드로 제어권 이동 -> 실행 컨텍스트에서 팝 -> 빈 스택

 

5. 렉시컬 환경

렉시컬 환경?

스코프, 식별자를 관리한다.

 

식별자,

식별자에 바인딩된 값,

상위 스코프에 대한 참조를 기록하는 자료구조

 <--> 실행 컨텍스트(코드의 실행 순서)

 

 

 스코프(key:value)를 생성 ---> 식별자를 key로 등록 --> 식별자에 바인딩 된 값 관리

 

환경 레코드: 

스코프에 포함된 식별자를 등록

등록된 식별자에 바인딩된 값을 관리하는 저장소.

소스코드 타입에 따라 관리 내용이 달라진다.

 

외부 렉시컬 환경에 대한 참조:

상위 스코프 == 외부 렉시컬 환경

해당 실행 컨텍스트를 생성한 소스코드를 포함하는 상위 코드의 렉시컬 환경

외부 렉시컬 환경에 대한 참조를 통해 단방향 linkedList 스코프 체인을 구현.

 

 

6. 실행 컨텍스트의 생성과 식별자 검색 과정

1. 전역 객체 생성

전역 객체는 전역코드가 평가되기 이전에 생성된다.

전역 객체에는 빌크인 전역 프로퍼티, 빌트인 전역 함수, 표준 빌드

동작 환경에 따라 클라이언트 사이드, 특정 환경을 위한 호스트 객체를 포함한다.

전역 객체는 Object.prototype을 상속 받는다. => 프로토타입 체인의 일원이다.

 

프로토타입이란?
부모(parent).
나에게 재산을 물려준다.

__proto__ ?
접근자 프로퍼티를 통해 자신의 부모를 간접적으로 접근 할 수 있다.

 

빨간색은 프로토타입이 3번, 초록색은 프로토타입이 4번 무슨 차이임???

 

 

 

 

5번

윈도우 부모의 부모의 부모의 부모의 부모는

부모가 없어

 

 

4번

윈도우 부모의 부모의 부모의 부모는 null

최상위 부모

 

 

 

 

3번

윈도우 부모의 부모의 부모는 Object

 

 

 

 

2번

윈도우 부모의 부모는 이벤트 타겟

 

 

 

 

1번

윈도우의 부모는 windowProperties

 

 

Client Side

Web API

    DOM

    BOM

    Canvas

    XMLHttpRequest

    fetch

    requestAnimationFrame

    SVG

    Web Storage

    Web Component

    Web Worker

 

2. 전역 코드 평가

1. 전역 실행 컨텍스트 생성
2. 전역 렉시컬 환경 생성
  2.1 전역 환경 레코드 생성
     1) 객체 환경 레코드 생성
     2) 선언적 환경 레코드 생성
  2.2 this 바인딩
  2.3 외부 렉시컬 환경에 대한 참조 결정

 

 

1. 전역 실행 컨텍스트 생성		실행 컨텍스트 스택
2. 전역 렉시컬 환경 생성		렉시컬 환경
2.1 전역 환경 레코드 생성		렉시컬환경에는 두가지
1) 객체 환경 레코드 생성		var 변수 foo() 전역 함수
2) 선언적 환경 레코드 생성		let, const
2.2 this 바인딩		전역이라 this는 window
2.3 외부 렉시컬 환경에 대한 참조 결정		부모를 가리킴. 전역 코드는 부모 없음 = null

 

총 집합

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

7. 실행 컨텍스트와 블록 레벨 스코프