JavaScript Deep Dive 요약 (5)

JungHanMa·2023년 3월 6일
0
post-thumbnail

22장  this

this란 ?

  1. 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가르키는 자기 참조변수이다.
  2. this는 JS엔진에 의해 암묵적으로 생성되며, 코드 어디에서든 참조 할 수 있다.
  3. 함수를 호출할때 arguments 객체와 this가 함께 전달된다.


this의 바인딩 : 함수호출 방식에 의해 결정되며, 바인딩된 값은 호출시점에 할당

  1. 일반 함수 호출 : window
  2. 메서드 호출 : 메서드를 호출한 객체
    ex) const a = {
    foo() {console.log(this)}
    }
    a.foo() => a
  3. 생성자 함수 호출 : 생성할 인스턴스
  4. apply / call / bind : 인자로 넘겨준 객체가 this로 바인딩 된다.



23장   실행 컨텍스트

정의

실행컨텍스트는 식별자(변수, 함수, 클래스 등의 이름)을 등록하고, 관리하는 스코프와 코드실행순서를 구현한 내부 메커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다.


소스코드 타입 : 실행컨텍스트를 생성하는 방법, 타입마다 생성되는 실행 컨텍스트가 다르다.

  1. 전역 코드 : 전역에 존재 하는 코드 => var or 함수 선언문을 객체 프로퍼티와 메서드로 바인딩
  2. 함수 코드 : 함수 내부에 존재 하는 코드 => 지역변수, 매개변수 , argument 객체를 관리하고 전역 스코프에 연결한다.
  3. evel 코드 : 빌트인 전역 함수, evel 함수에 인수로 전달되어 실행하는 코드
  4. 모듈 코드 : 모듈 내부에 존재하는 코드

소스코드 평가와 실행

  1. 평가 : 실행컨텍스트를 실행하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 Key로 실행컨텍스트가 관리하는 스코프에 등록한다.

  2. 실행 : 선언문을 제외한 소드코드가 순차적으로 실행되기 시작하고, 런타임이 시작된다.
    이떄 소스코드에 필요한 정보 즉, 변수나 함수의 참조는 실행 컨텍스트에서 관리하는 스코프에서 검색하여 취득한다. 그리고 값의 변경이나 결과는 다시 실행컨텍스트에 등록된다.

실행 컨텍스트의 역할

  1. 선언에 의해 생성된 모든 식별자를 스코프를 구분하여 등록하고 상태변화를 지속적으로 관리
  2. 스코프는 중첩관계에 의해 스코프 체인을 형성 하여야한다. (스코프체인을 통해 상위스코프로 이동하여 식별자를 검색)
  3. 현재 실행중인 코드의 실행순서를 변경 할 수 있어야하며, 되시 되돌아 갈수도 있어야 한다.

실행 컨텍스트의 스택

실행 컨텍스트의 스택은 코드의 실행중인 순서를 관리한다. 최상위 존재하는 컨텍스트를 현재 실행중인 컨텍스트라고 부른다.


현재 bar()가 현재 실행중인 최상위 스택


렉시컬 환경

식별자와 식별자에 바인딩된 값 그리고 , 상위 스코프의 참조를 기록하는 자료구조로 실행 컨텍스트를 구성하는 컴포넌트이다.

  1. 환경레코드 : 자신의 렉시컬 환경
  2. 외부 렉시컬 환경 : 상위 스코프의 렉시컬 환경

전역 코드 평가 순서

  1. 전역 실행 컨텍스트 생성
  2. 전역 렉시컬 환경생성
  3. 전역 환경 레코드 생성 => 객체환경레코드(var(BindingObject)) + 선언적환경 레코드(let, const)
  4. this 바인딩
  5. 외부 렉시컬 환경에 대한 참조 결정 ( 전역 렉시컬 환경의 외부 렉시컬 환경은 null 할당 )

함수 코드 평가 순서

  1. 함수 실행 컨텍스트 생성
  2. 함수 렉시컬 환경 생성
  3. 함수 환경 레코드 생성 => 매개변수 , arguments, 함수내부의 지역변수, 중첩함수
  4. this 바인딩
  5. 외부 렉시컬 환경에 대한 참조 결정 ( 함수 정의가 평가된 시점에 실행 중인 실행컨텍스트의 렉시컬 환경의 참조가 할당된다.)

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

  1. 블록 렉시컬 환경 생성
  2. 전역실행 컨텍스트의 참조를 블록 렉시컬 환경으로 교체
  3. 블록 함수 레코드 생성 ( 선언적 환경 레코드 )
  4. 외부 렉시컬 환경에 글로벌 렉시컬 환경 참조


24장  클로져

정의

외부 함수보다 중첩함수가 더 오래 유지되는 경우, 중첩함수는 이미 생명주기가 종료된 변수를 참조할 수 있다. 이러한 중첩함수를 클로져라고 한다.

함수 객체의 내부 슬롯

[[Environment]] 안에서 상위 스코프의 참조를 저장한다.


동작원리

  1. 중첩함수는 자신이 평가될 때, 자신이 정의된 위치에 의해 상위 스코프를 내부슬롯 [[Environment]]에 저장한다.
  2. 외부 함수의 실행이 종료되면 생명주기가 마감되고, 실행컨텍스트의 스택에서 제거된다. (이떄, 렉시컬 환경까지 소멸하는것은 아님 => 가비지컬렉터에서 수거하지 못함 )
  3. 중첩함수에서 내부슬롯 [[Environment]]으로 상위 스코프 참조

클로져의 활용

상태를 안전하게 변경하고, 유지하기 위해 사용한다.
다시말해 상태가 의도치 않게 변경되지 않도록 상태를 은닉하고 특정함수에게만 상태 변경을 허용하기 위해 사용한다.


캡슐화

객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 동작할 수 있는 메서드를 하나로 묶은것


은닉

객체의 프로퍼티나 메서드를 감출 목적으로 사용하는 것

은닉의 이점

외부에 공개할 필요가 없는 구현의 일부를 외부에 공개 되지않도록 적절치 못한 접근으로부터 객체의 상태가 변경되는것을 방지해 정보를 보호하고, 객체간의 상호의존성을 낮추는 효과


정보 은닉 방법

Javascript에서는 public, private 등 접근 제어자가 없음.
그래서 기본적으로 public임. private으로 사용하고 싶다면 다음과 같이 사용.

function Person (name, age ) {
     this.name = name;  // public
     let age = age;   // private
}

profile
Frontend Junior

0개의 댓글