[정리] 3주차, 20~25

3주차

chater 20 ~ 25

table of keyword

0. 빌트인객체
1. this
2. 실행컨텍스트
3. 클로저
4. 클래스

래퍼객체

Q. 표준 빌트인 객체는 내장된 정적 메서드를 이용할 수 있다.
객체가 아닌 원시타입도 정적 메서드를 이용할 수 있는데, 어떻게 가능한걸까?

const food = 'kimbob'; 
console.log(food.length); // 6 

A. JS엔진이 원시값을 래퍼객체(임시객체)로 변환해 해당 메서드를 호출하는 방식으로 이루어진다. *메서드를 수행한 후, 다시 원시값을 되돌린다.

동작원리

마침표 접근자 접근 → 래퍼 객체 생성 & 내부슬롯에 원시값 할당됨 → 호출한 메서드 수행 → 원시값으로 되돌림 → 래퍼객체 식별자 x → 가비지 컬렉션대상

전역객체
표준 빌트인 객체, 호스트 객체, 전역 변수(var 키워드)와 전역함수를 프로퍼티로 가지는, 최상위 객체.

• 객체의 계층구조상 최상위에 위치함.(상속관계랑 관련 x)
• let, const 키워드로 생성된 전역 변수는 포함 x → 전역객체로 접근 불가.
• 브라우저 환경에선 window, node.js에선 global.

this

자기참조변수

1. JS엔진에 의해 암묵적으로 생성되며, 함수 호출 시 함수 내부로 전달된다.
2. 함수 호출방식에 따라 this 바인딩이 동적으로 결정된다.

• 일반함수(중첩,콜백함수 포함)
  • 전역객체
• 메서드 호출
  • 메서드를 호출한 객체
• 생성자 함수 호출
  • 생성자 함수가 생성한 인스턴스

주의해야할 케이스

const lunchMenu = {
    menu_name: 'pizza',
    answer(callback) {
        setTimeout(callback, 100); // setTimeout(callback.bind(this), 100);
    }
}

lunchMenu.answer(function () {
    console.log(`Today's lunch menu is ${this.menu_name}!!`); // undefined
})

메서드를 호출한 객체의 this는 객체와 연결되어있다.
하지만 일반함수인 콜백함수는 전역객체와 연결되어있기에 undefined이 나온다.

이럴경우, function.prototype.bind메서드를 이용해 참조하길 원하는 this를 정해주면 해결된다.

실행컨텍스트

실행컨텍스트는 자바스크립트의 동작원리 핵심이다.

용어정의

1. 실행컨텍스트 스택
   : 스택 자료구조로 코드의 실행순서를 관리한다.
2. 렉시컬 환경 : 실행 컨텍스트의 컴포넌트
   • 환경레코드 : 스코프 내 식별자와 식별자에 바인딩된 값을 관리하는 저장소.
   • 외부렉시컬 참조 : 참조할 상위 렉시컬 환경.

동작원리

1. 전역 실행 컨텍스트 생성한 뒤, 전역 렉시컬 환경을 생성해 실행 컨텍스트에 바인딩한다.
2. 전역 렉시컬 환경의 환경레코드를 생성한 뒤, this를 바인딩한다.
3. 전역 렉시컬 환경에서 참조할 상위 렉시컬 환경을 결정한다.
4. 이제 비로소 !! 전역 코드를 실행한다.

클로저

렉시컬 스코프를 따르는 프로그래밍 언어, JavaScript

렉시컬 스코프: 함수정의가 평가된 시점을 기준으로 상위 스코프가 결정되는 것.

함수가 평가될 때, 자신이 정의된 위치에 의해 결정된 상위 스코프를 [[Environment]] 내부슬롯에 저장한다.
해당 스코프에 찾는 프로퍼티가 없을 때, 기억해둔 상위스코프로 가서 검색한다.

function add(a) {
  function getNumber() {
     let b = prompt(`더할 숫자를 입력하세요`);     
  } 
 return a + b; 
}

자신이 정의된 위치의 스코프가, 평가하는 함수의 상위스코프다.

getNumber의 상위스코프는, 해당 함수가 정의된 add 스코프가 된다.
add의 상위스코프는, 전역스코프에 정의되었기에 전역스코프가 된다.

클로저 동작방식
외부함수의 반환값으로 중첩함수를 받아, 스코프 체인을 통해 외부 함수를 참조할 수 있다.
또한, 내부슬롯[[Environment]]을 통해 외부함수를 참조하고 있기에 외부함수의 렉시컬 환경이 소멸하지 않는다.
*다만, 실행컨텍스트 스택에서는 외부함수 제거가 이루어진다.

따라서 클로저를 통해 소멸한 외부함수를 접근해, 식별자를 참조할 수 있고, 식별자의 값을 변경할 수도 있다.

클래스

클래스 호이스팅 let, const호이스팅과 동일 - 런타임 이전에 클래스가 선언되지만, 정의 전까지 접근할 수 없다.

클래스 특징

1. 클래스는 함수로 평가된다.
2. constructor
   • 최대 1개 존재, 제일 처음 호출된다.
   • 별도의 반환문 없어야한다. (암묵적으로 this 반환됨)
3. class 내부에서 정의한 메서드는 기본적으로 프로토타입 메서드로 작동한다.
4. 클래스 메서드(=정적메서드)는 인스턴스를 생성하지 않아도 호출 할 수 있다.
   • 정적 메서드를 생성하기 위해선 static키워드를 메서드 앞에 붙이면 된다.
5. 클래스 상속 extends
   • 서브클래스에서 constructor을 생략하지 않는 경우, 서브클래스 constructor에 반드시 super을 호출해야한다.
     *실제로 인스턴스를 생성하는 주체는 수퍼클래스이기때문에, super을 호출하지 않으면 인스턴스를 생성할 수 없다.

---

Contributor

@live-small