생일을 챙겨주는 게 부끄러웠던 현석님(ㅎㅎ)

🔖 읽은 범위: ~p.300 (9장, 10장)

선수지식 공부

6.2.3 프로토타입 & 6.3.2 상속

MDN 의 예제이다.

• Person 은 person1의 프로토타입이고, person1 은 Person 의 인스턴스이다.
• prototype 프로퍼티는 상위 객체(프로토타입 객체)의 메서드들 모음집이다.
• 예를 들어, Object 의 valueOf 메서드를 person1 에서 Object.prototype.valueOf 로 받아서 사용가능하다. 이런 걸 상속이라고 한다.
• person1 은 Person.prototype 과 Object.prototype 을 가지는 것이고, Person 은 Object.prototype 만을 가지게 되는 것이다.

키워드 정리

게터
인스턴스 메서드
정적 메서드
인스턴스 필드
정적 필드

✨ 책갈피

• 객체는 프로퍼티의 고유한 집합이며 다른 어떤 객체와도 같지 않다.
• 하지만 일부 프로퍼티를 공유하는 객체 클래스를 만드는 것이 유용할 때도 많다
• 클래스: 고유한 객체(프로토타입)의 프로퍼티를 상속하는 객체들의 집합.
• 두 객체가 같은 프로토타입에서 프로퍼티를 상속한다면 이들을 같은 클래스의 인스턴스라고 부릅니다.

9.1 클래스와 프로토타입

• 6장에서 설명했던 Object.create() 함수가 바로 이렇게 프로토타입 객체를 정의하고 프로토타입을 상속하는 객체를 생성하는 클래스 정의 함수이다.
• 이렇게 어떤 객체를 반환하는 함수를 팩토리 함수(factory function) 이라고 한다고 한다.
• 예제가 잘 이해가 안간다. 나중에 다시 한 번 읽어보자.

// 단순한 자바스크립트 클래스 - 정의

function range(from, to) {
  let r = Object.create(range.methods);
  
  r.from = from;
  r.to = to;
  
  return r;
}

// 단순한 자바스크립트 클래스 - 사용

let r = range(1,3);

9.2 클래스와 생성자

• class 키워드를 지원하지 않는 버전에서 클래스를 만드는 법(정통):

// 생성자(new 로 호출)를 사용한 클래스 - 정의
function Range(from, to) {
  this.from = from;
  this.to = to;
}

// 사용
let r = new Range(1,3);

클래스 이름은 관습적으로 대문자로 시작한다.
new와 함께 Range() 생성자를 호출했으므로 새 객체를 생성하기 위해 Object.create()를 호출하거나 다른 동작을 취할 필요가 없다.

9.3 class 키워드를 사용하는 클래스

// 정의
class Range {
  constructor(from,to) {
  this.from = from;
  this.to = to;
}

// 사용
let r = new Range(1,3);

• 아래와 같이 표현식 형태로 쓸 수 도 있다.

// 함수
let squre = function (x) { reutrn x*x } ;
squre(3); // => 9

// 클래스
let Squre = class { constructor(x) { this.area = x*x };
new Squre(3).area // => 9

그외에 class 키워드를 사용해 클래스 생성시 중요한 점:
1) class 선언의 바디는 use strict 안써도 스트릭 모드다.
2) class 선언은 함수 선언과 달리 호이스팅 되지 않는다.

매서드 선언을 추가해서 한 번 더 적용해보기

❓ 궁금점

prototype 프로퍼티를 갖는 객체는 비교적 적다는 겁니다.(p.154)
=> 왜지? 함수 같은 경우는 모두 Object.prototype 을 가지게 되는 것 아닌가?

⛏ 더 파보자 (직접 해보기)