오늘 배운 것

• Prototype chain
• Object.create
• class/super

Prototype chain

개요

상위 프로토타입 객체(A)를
상속받은 객체(B)를
다른 하위 객체(C)가 상속받고
또 다른 하위 객체(D)가 상속받는 연결을 Prototype chain이라고 부른다.

사용되는 용어/개념 정리

Prototype

인스턴스들은 클래스가 가진 데이터를 공통적으로 갖게 된다. 그리고 인스턴스가 많아지면 중복되는 값도 많아진다.
이러한 문제를 해결하기 위해 클래스 생성자 함수에서 나온 객체들이 공통된 속성을 공유하는 부모 객체를 프로토타입이라고 한다.

function Person(name, gender) {
  this.name = name;
  this.gender = gender;
}
Person.prototype.sayHello = function() {
  alert(this.name + ' said "hello"');
};

this를 이용하면 인스턴스들에 모두 name과 gender를 저장하지만, Prototype을 이용하면 1번만 정의하고, 인스턴스들은 해당 객체를 참조하게 된다.

__proto__

객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리킨다
tree 구조의 파일 시스템으로 친다고 할 때 상위 폴더와 비슷한 개념이다.

Constructor

생성자 함수가 생길 때 그 함수의 프로토타입도 동시에 생긴다.
생성자 함수 내부에는 prototype이라는 속성 안에 prototype object가 있고,
반대로 prototype 내부에는 constructor라는 속성 안에 생성자 함수가 있어 상호 참조하게 된다.

생성된 객체의 시점에서는 자신을 생성한 생성자 함수를 지칭한다.

Object.create()

개요

새 객체를 만든다. 그런데 이제 지정된 프로토타입 객체와 속성을 갖는
이 메소드를 이용하면 사용자가 프로토타입 객체를 직접 명시할 수 있으므로 상당히 유용하다.
주로 기존의 객체를 상속해 확장하는 데 사용된다.

사용법

Object.create() 메소드의 인수는 위치에 따라 역할이 다르다.
1번째 자리 : 프로토타입으로 사용할 객체
2번째 자리 : 새로운 객체의 추가할 프로퍼티 정보

new Object()와의 차이점

두 방식 모두 새로운 객체를 생성하는 것은 동일하나, 생성 방식은 다르다.
new를 사용했을 경우 함수가 생성자로 실행되지만
Object.create()의 경우 동일한 객체만 생성하고 생성자는 실행하지 않는다.

class

자바스크립트에서 클래스를 만드는 대표적인 방법으로는 2가지가 있다

• 함수를 이용한 방식 (ES5 이전)
• 클래스 생성자를 이용한 방식 (ES6 이후부터 사용 가능)

함수를 이용한 방식

function Car(name, brand, color) {
  this.name = name;
  this.brand = brand;
  this.color = color;
}
Car.prototype.drive = function() {
  // 주행과 관련된 코드
}
Car.prototype.reverse = function() {
  // 후진과 관련된 코드
}

클래스 생성자를 이용한 방식

class Car {
  constructor(name, brand, color) {
    this.name = name;
    this.brand = brand;
    this.color = color;
  }
}
drive() {
  // 주행과 관련된 코드
}
reverse() {
  // 후진과 관련된 코드
}

extend

클래스를 상속하는 키워드이다.
기존에 존재하던 기능을 토대로 새로운 기능을 만들 수 있다.

class Suv extends Car {
  constructor(name, brand, color){
    this.name = name;
    this.brand = brand;
    this.color = color;
  }
}
awdDrive() {
  // 자동 4륜구동과 관련된 코드
}
campmode() {
  // 캠핑모드와 관련된 코드
}

기존 Car 클래스의 기능은 그대로 다 가지고 있으면서 새로운 기능이 추가된 클래스를 만들 수 있다.

super

함수처럼 호출이 가능함과 동시에 this와 같이 식별자로도 참조할 수 있는 키워드이다.

생성자 함수에서 super(name, brand, color)를 이용하면 수퍼클래스의 생성자를 호출한다.

super.classname을 이용하면 수퍼클래스의 연산 결과를 받아온다.

class Car {
  constructor(name, brand, color) {
    this.name = name;
    this.brand = brand;
    this.color = color;
  }
}
drive() {
  // 주행과 관련된 코드
}
reverse() {
  // 후진과 관련된 코드
}

class Suv extends Car {
  constructor(name, brand, color, lineup){
    super(name, brand, color)
    this.lineup = lineup;
  }
}
awdDrive() {
  // 자동 4륜구동과 관련된 코드
}
campmode() {
  // 캠핑모드와 관련된 코드
}