JS OOP 2편 - Class

JS의 클래스 구조

자바스크립트의 클래스는 자바의 클래스와 겉보기에는 같아 보이지만

내부의 구조는 다르다.

JS의 빌트인 객체 구조에서 프로토타입 상속구조를 사용해 구현되는 것으로

기본 개념은 생성된 함수와 같이 생성되는 프로토타입 객체를 통해 상속을 구현하고

생성자 함수와 new연산자를 통해 this를 생성된 객체에 바인딩하는 구조로 작성된다.

Class

//ES6 class
class Elf {
  constructor(name, weapon) {
    this.name = name;
    this.weapon = weapon;
  }

  attack() {
    return "attack with" + this.weapon;
  }
}

const peter = new Elf("Peter", "stones");
peter.attack();
console.log(peter instanceof Elf);

Elf클래스를 new연산자를 통해 인스턴스인 peter를 생성하는 것은

전달받은 인자인 Peter와 stones를 Elf의 생성자 함수를 통해 실행되며

생성되는 인스턴스인 peter는 생성자 함수를 통해 생성되는 객체이며

this.name 등의 속성들은 new연산자를 통해 this가 새로 생성되는 객체인 peter를 가리키며

따라서 새로운 객체인 peter의 속성으로 추가되는 것이다.

또한 생성자 함수 외의 Elf의 메서드들은

생성되는 인스턴스들이 prototype객체의 메서드로써 상속받는 형식이다.

• 생성자 함수의 this는 new연산자를 사용했을 때 인스턴스 객체를 가리킨다.
• 생성자의 this가 인스턴스 객체를 가리키므로 객체의 속성이 추가되는 방식
• 클래스의 함수들은 인스턴스 객체가 상속해서 사용하는 구조