모던 자바스크립트 Deep Dive Ch21~23.

Jayde·2023년 2월 28일
0

2023-1 studyJs

목록 보기
6/7
post-thumbnail

Ch.21 빌트인 객체

  • js 객체의 분류
    1. 표준 빌트인 객체
    ECMAScript에 정의된 전역 변수처럼 js 실행 환경이라면 어디서든 사용 가능
    2. 호스트 객체
    ECMAScript 사양에 정의되어 있진 않지만 js 실행 환경에서 추가로 제공하는 객체
    3. 사용자 정의 객체
    사용자가 직접 정의한 객체

  • 표준 빌트인 객체
    모두 인스턴스 생성이 가능한 생성자 함수 객체(Math, Reflect, JSON 제외)
    표준 빌트인 객체를 생성자 함수로 호출해 생성한 인스턴스의 프로토타입은 표준 빌트인 객체의 prototype 프로퍼티에 바인딩된 객체
    표준 빌트인 객체의 prototype 프로퍼티에 바인딩된 객체에서 빌트인 프로토타입 메서드 사용 가능

  • 원시값과 래퍼 객체
    String, Number, Boolean, Symbol 제외한 원시값인 undefined, null 은 사용 불가
    원시값에 대해 객체처럼 접근하면 js 엔진이 일시적으로 원시값을 연관된 객체로 변환
    래퍼 객체 : 문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체
    원시값에 마치표 표기법으로 접근하면 그 순간 생성자 함수의 인스턴스가 생성되고 래퍼 객체의 내부 슬롯에 할당됨.
    이후 래퍼 객체 처리 종료 시 내부 슬롯에 할당된 원시값을 되돌리고 래퍼 객체는 가비지 컬랙션의 대상이 됨

  • 전역 객체
    : 코드가 실행되기 이전 단계에 js 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체이며 어떤 객체에도 속하지 않은 최상위 객체
    <특징>
    ➖ 개발자가 의도적으로 생성 불가
    ➖ 전역 객체 프로퍼티 참조 시 window(또는 global) 생략 가능
    ➖ 모든 표준 빌트인 객체를 프로퍼티로 가짐
    ➖ 실행 환경에 따라 추가적으로 프로퍼티와 메서드를 가짐
    ➖ var 키워드로 선언한 전역 변수와 선언하지 않은 변수에 값을 할당한 암묵적 전역, 전역 함수는 전역 객체의 프로퍼티가 됨
    ➖ let이나 const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아님. 보이지 않는 개념적 블록에 존재
    ➖ 브라우저 환경의 모든 js 코드는 하나의 전역 객체를 공유.

  • 빌트인 전역 프로퍼티
    Infinity : ∞를 나타내는 숫자를 가짐
    NaN : Number.NaN 프로퍼티와 같음
    undefined

  • 빌트인 전역 함수
    eval : js 코드를 나타내는 문자열을 인수로 받음.

    • 표현식 → 문자열 코드를 런타임에 평가해 값 생성
    • 표현식이 아닌 문 → 문자열 코드를 런타임에 실행
    • 기존 스코프를 런타임에 동적으로 수정(strict mode에선 X)
    • let, const로 선언된 변수엔 암묵적으로 strict로 동작
    • 사용자 입력을 그대로 실행하는 것은 보안에 매우 취약, 실행 처리 속도가 느림 → 사용 금지

    isFinite : 전달받은 인수가 정상적인 유한수인지 아닌지
    isNaN : 전달받은 인수가 NaN인지
    parseFloat : 전달받은 문자열 인수를 부동 소수점 숫자(실수)로 반환
    parseInt : 전달받은 문자열 인수를 정수로 반환, 정수가 아니면 정수로 해석 후 반환
    - 두번째 인수로 진법을 나타내는 기수를 전달 가능(반환값은 언제나 10진수)
    encodeURI, decodeURI : 이스케이프(네트워크를 통해 정보를 공유할 때 어떤 시스템에서도 읽을 수 있게 아스키 문자 셋으로 변환하는 것) 처리
    encodeURIComponent, decodeURIComponent : 위에랑 동일하나 encodeURIComponent는 전달된 문자열을 쿼리 스트링으로 봐서 =, ?, &도 인코딩 함

  • 암묵적 전역
    선언되지 않은 변수를 window.변수로 해석하여 전역 변수처럼 동작
    이러면 변수가 된 게 아니라 전역 객체의 프로퍼티가 되었을 뿐이므로 변수 호이스팅이 발생하지 않음
    변수가 아니기 때문에 delete로 삭제 가능


Ch22. this

: 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수
this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드 참조 가능

  • 함수 호출 방식과 this 바인딩
    this가 가리키는 값은 함수 호출 방식에 의해 동적으로 결정됨
    1. 일반 함수 호출
    기본적으로 this에는 전역 객체가 바인딩 됨
    2. 메서드 호출
    메서드를 호출한 객체에 바인딩

        const person = {
            name: 'Lee',
            getName() {
                return this.name;
            }
        };
        console.log(person.getName()); //Lee

    3. 생성자 함수 호출
    생성자 함수가 생성할 인스턴스가 바인딩 됨
    4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출
    첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩

    function getThisBinding() {
      return this;
    }
    
    const thisArg = {a: 1};
    
    console.log(getThisBinding.call(thisArg)); //{a:1}

Ch23. 실행 컨텍스트

: 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역

  • 소스코드의 타입과 컨텍스트
    1. 전역 코드
    전역 스코프 생성
    전역 스코프와 전역 객체 연결(var로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해)
    전역 코드 평가 → 전역 실행 컨텍스트 생성
    2. 함수 코드
    지역 스코프 생성
    지역 변수, 매개변수, arguments 객체 관리
    생성한 지역 스코프를 스코프 체인의 일원으로 연결
    함수 코드 평가 → 함수 컨텍스트 실행
    3. eval 코드
    strict mode에서 자신만의 독자적 스코프 생성
    eval 코드 평가 → eval 실행 컨텍스트 생성
    4. 모듈 코드
    모듈별 독립적인 모듈 스코프 생성
    모듈 코드 평가 → 모듈 실행 컨텍스트 생성

  • 소스코드 평가와 실행
    소스코드 평가 과정: 실행 컨텍스트 생성 + 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록
    소스코드 실행: 선언문 제외 소스코드 순차적 실행(=런타임 시작)
    변수 값의 변경과 같은 소스코드의 실행 결과는 다시 실행 컨텍스트 관리 스코프에 등록

  • 실행 컨텍스트의 역할
    1. 전역 코드 평가
    전역 코드의 변수 선언문과 함수 선언문 먼저 실행 → 생성된 전역 변수와 전역 함수가 실행 컨텍스트가 관리하는 전역 스코프에 등록(각각 전역 객체의 프로퍼티와 메서드가 됨)
    2. 전역 코드 실행
    3. 함수 코드 평가
    함수 내부로 진입 후 매개변수와 지역 변수 선언문이 먼저 실행, arguments 객체 생성 → 지역 스코프에 등록
    this 바인딩 결정됨
    4. 함수 코드 실행

    식별자와 스코프: 실행 컨텍스트의 렉시컬 환결으로 관리
    코드 실행 순서: 실행 컨텍스트 스택으로 관리

  • 실행 컨텍스트 스택
    코드 실행 순서 관리
    최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트

  • 렉시컬 환경
    :실행 컨텍스트를 구성하는 컴포넌트 / 식별자와 식별자에 바인딩된 값, 상위 스코프에 대한 참조를 기록하는 자료구조
    스코프와 식별자 관리
    객체 형태의 스코프를 생성 → 식별자를 키로 등록하고 식별자에 바인딩된 값 관리

    <구성>
    환경 레코드: 식별자 등록, 등록된 식별자에 바인딩된 값 관리를 하는 저장소
    외부 렉시컬 환경에 대한 참조: 상위 코드의 렉시컬 환경을 가리킴

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

    1. 전역 객체 생성
    2. 전역 코드 평가(전역 실행 컨텍스트 생성 → 전역 렉시컬 환경 생성 → this 바인딩 → 외부 렉시컬 환경에 대한 참조 결정)
    3. 전역 코드 실행
    4. 함수 코드 평가(2와 거의 동일)
    5. 함수 코드 실행
    6. 함수 코드 실행 종료
    7. 전역 코드 실행 종료
  • 실행 컨텍스트와 블록 레벨 스코프
    블록 레벨 스코프를 생성하려면 렉시컬 환경을 새롭게 생성하여 기존 전역 렉시컬 환경을 교체함.

profile
가장 높이 빛난 별 잡아보일게

0개의 댓글