[JavaScript] Class 클래스 (1)

기존 프로토타입 상속 문법

function Hello (name) {
  this.name = name;
}

Hello.prototype.sayHello = function () {
  console.log(this.name + "님 안녕하세요.");
}

const h1 = new Hello('lpla');
const h2 = new Hello('coffee');

h1.sayHello();
h2.sayHello();

// 결과
// lpla님 안녕하세요.
// coffee님 안녕하세요.

 

ES6 클래스 상속 문법

class Hello {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(this.name + "님 안녕하세요.");
  }
}

const h1 = new Hello("lpla");
const h2 = new Hello("coffee");

h1.sayHello();
h2.sayHello();

// 결과
// lpla님 안녕하세요.
// coffee님 안녕하세요.

 

자바스크립트는 프로토타입 기반 객체 지향 언어이고 모든 객체는 프로토타입으로부터 프로퍼티와 메서드를 상속 받는다.

ES6 에서 도입된 클래스 역시 다르지 않다.

클래스 문법을 해석하면 아래와 같다.

 

// 1. Hello 라는 함수를 만든다.
class Hello {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(this.name + "님 안녕하세요.");
  }
}

// 2. 타입 확인 결과 Hello 는 함수이다.
console.log(typeof Hello);
// function

// 3. Hello 는 Hello 생성자 메서드와 같다.
console.log(Hello === Hello.prototype.constructor);
// true

// 4. 클래스 내부 메서드는 Hello.prototype 에 저장된다.
console.log(Hello.prototype.sayHello);
// console.log(this.name + "님 안녕하세요.");

// 5. Hello 의 프로토타입에는 2개의 메서드가 존재한다.
console.log(Object.getOwnPropertyNames(Hello.prototype));
// (2) ["constructor", "sayHello"]