js_실행컨텍스트

dev.dave·2023년 7월 29일

Javascript

목록 보기
135/167

실행 컨텍스트


  • 함수컨텍스트는 호출시에 만들어진다.

  • 즉 호출하기전에는 컨텍스트가 아직 없는거다.

  • 컨텍스트는 스코프로시작해서 this 로끝난다.

컨텍스트는 한국말로 번역하면 문맥입니다.

쉽게 코드의 실행 환경이라고 이해하시면 될 거 같습니다.

  • 먼저 전역 컨텍스트 하나 생성 후,

  • 함수 호출 시마다 컨텍스트가 생깁니다.

  • 컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, variable), scope chain, this가 생성됩니다.

  • 컨텍스트 생성 후 함수가 실행되는데,

  • 사용되는 변수들은 변수 객체 안에서 값을 찾고,

  • 없다면 스코프 체인을 따라 올라가며 찾습니다.

  • 함수 실행이 마무리되면

  • 해당 컨텍스트는 사라집니다.

  • (클로저 제외)

  • 페이지가 종료되면 전역 컨텍스트가 사라집니다.

전역 컨텍스트

전역 컨텍스트가 생성된 후
변수객체, scope chain, this가 들어옵니다.

전역 컨텍스트는 arguments(함수의 인자를 말합니다)가 없고요.

variable은 해당 스코프의 변수들입니다.

name, wow, say가 있네요.

scope chain(스코프 체인, 자신과 상위 스코프들의 변수객체입니다)은 자기 자신인 전역 변수객체입니다.

this는 따로 설정되어 있지 않으면 window입니다.

this를 바꾸는 방법이 바로 new를 호출하는 겁니다.
(또는 함수에 다른 this 값을 bind할 수도 있습니다)

일반 함수의 this가 왜 window인지 아시겠죠?

원래 기본적으로 window고 new나 bind같은 상황에서 this가 바뀌는 겁니다.

[실행컨텍스트 종류]

(1) 전역코드의 실행컨텍스트

  • 전역 객체(Global Object)의 실행컨텍스트

  • 전역 객체는 1개 뿐임 : 객체의 프로퍼티를 통해 전역변수, 전역함수 등 프로그램 어디든 접근 가능

  • 전역 객체 프로퍼티를 보고싶다면 크롬개발자도구에서 window를 치고 엔터

  • 전역 객체에는 기본적으로 Built-in object(Math, String, Array 등) BOM(window 객체), DOM이 세팅되어있음

  • 생성과정은 아래에 나와있는 것과 같음(변수객체, 스코프 정보 생성 및 초기화, this 바인딩)

(2) 함수코드의 실행컨텍스트
- 함수 정보가 저장되는 객체의 컨텍스트

[실행컨텍스트 생성 및 파기과정]

(1) 스코프 정보(스코프 체인) 생성

  • 현재 실행컨텍스트의 유효 범위를 나타내는 스코프 정보가 생성됨(어디까지 현재 실행 함수가 유효한지, 범위 정보)
  • 스코프 정보에는 어떤 것들까지 연결되는지 정보가 담겨있음
  • 스코프 정보를 통해 상위 실행 컨텍스트 변수 접근도 가능함(scope chain)
    => 하위 함수가 실행되는 동안 상위함수의 변수 또는 함수 메모리를 참조하는 것
    => 최상위는 전역객체(window)
  • 스코프 정보는 리스트 형태로 생성됨
  • [[scope]] 프로퍼티로 이 리스트를 참조할 수 있음
  • 리스트에서 찾지 못한 변수는 정의되지않은(undefined)로 판단되어 ReferenceError를 출력

(2) 변수 객체(Variable Object, 줄여서 VO) 생성

  • 실행에 필요한 여러 정보(변수, 함수, 매개변수 - 프로퍼티로는 매개변수를, 값으로는 인수를)를 담음
  • 전역코드 실행컨텍스트에서는 전역객체(window, 모든 전역변수/함수 등을 담음)가 변수 객체(VO) 역할
  • 함수코드 실행컨텍스트는 변수 객체를 하나씩 생성함
  • 변수 객체 세팅은 아래의 순서와 같이 세팅됨
    1) 매개변수가 객체의 프로퍼티로, 인수가 프로퍼티의 값으로 세팅됨
    2) 함수명이 객체의 프로퍼티로, 함수 객체(함수선언식)가 값으로 세팅됨
    => 함수표현식은 제외 : var myfuntion = function() { ... }
    3) 변수명이 프로퍼티로, undefined가 값으로 세팅됨
    => 아직 실제값이 세팅된 것이 아님
    => 함수 포스팅에서 호이스팅 부분 참고

(3) this 바인딩

  • this 키워드를 통해 참조되는 값이 바인딩됨
  • 모든 실행컨텍스트와 관련되어 있음
  • 객체의 스코프 프로퍼티에 값이 없으면 전역 객체(window.)의 스코프 프로퍼티 값(전역코드 실행컨텍스트)을 참조함 

(4) 코드 실행

  • 코드 실행은 진짜 이부분, 변수객체가 생성되고 프로퍼티와 this 바인딩이 모두 세팅된 다음
  • 앞서 변수 객체에서 대입되지 않았던 값이 여기서 대입됨

(5) 실행컨텍스트 파기

  • 함수코드의 실행컨텍스트 함수 실행이 끝나면 해당 함수의 실행컨텍스트를 파기함

  • 전역코드의 실행컨텍스트는 어플리케이션 종료 시 파기함

  • 컨트롤은 이전 컨텍스트에 반환됨

profile
🔥개인 메모 / 다른블로그 자료 참조 / 다른블로그 자료 퍼옴 (출처표기) /여기저기서 공부 했던 내용 개인메모 & 참고 / 개인 기록 용도 블로그 입니다.🔥

0개의 댓글