[Javascript] 클래스의 동작원리와 클래스 상속(오버라이딩)

📌 출처 : https://ko.javascript.info/class

클래스

클래스 동작원리

함수는 기능을 포장하는 기술이라면, 클래스는 변수와 함수 중 연관있는 것들을 선별해 포장하는 기술이다. 클래스를 활용하면 객체단위로 코드를 그룹화하고 재사용이 용이하다.

class User {
	constructor(name) {
		this.name = name
	}
	sayHi() {
		console.log(this.name)
	}
}
console.log(typeof User) // function

class User { … } 문법 구조의 동작 원리는 다음과 같다.

1. User라는 이름을 가진 함수를 만든다. 함수 본문은 생성자 메서드 constructor에서 가져온다. 생성자 메서드가 없으면 본문이 비워진 채로 함수가 만들어진다.
2. sayHi 같은 클래스 내에서 정의한 메서드를 User.prototype에 저장한다.

⇒ new User를 호출해 객체를 만들고, 객체의 메서드를 호출하면 User 함수의 prototype 프로퍼티를 통해 가져올 수 있다(User class가 생성한 인스턴스의 프로토타입이 User.prototype이기 때문!)

클래스와 동일한 기능을 하는 순수함수

// class User와 동일한 기능을 하는 순수 함수를 만들어보겠습니다.

// 1. 생성자 함수를 만듭니다.
function User(name) {
  this.name = name;
}
// 모든 함수의 프로토타입은 'constructor' 프로퍼티를 기본으로 갖고 있기 때문에
// constructor 프로퍼티를 명시적으로 만들 필요가 없습니다.
// 즉 User.prototype을 콘솔에 찍어보면 constructor 메서드가 내장되어있는 것을 확인할 수 있다.

// 2. prototype에 메서드를 추가합니다.
User.prototype.sayHi = function() {
  alert(this.name);
};

// 사용법:
let user = new User("John");
user.sayHi();

위의 예시처럼 순수 함수로 클래스 역할을 함수를 선언하는 방법과 class 키워들르 사용하는 방법의 결과는 거의 같다.

하지만 두 방법에는 중요한 차이가 있다.

클래스 vs 생성자 함수

1. class로 만든 함수엔 특수 내부 프로퍼티인 [[IsClassConstructor]] : true 가 이름표처럼 붙는다. 이것만으로도 두 방법엔 분명히 차이가 있음을 알 수 있다. 자바스크립트는 다양한 경우에 이를 활용한다. 클래스 생성자를 new와 함께 호출하지 않으면 에러가 발생하는데 이 때 [[IsClassConstructor]] : true 가 사용된다. 또한 클래스 생성자를 문자열로 형변환 하면 ‘class’로 시작하는 문자열이 되는데 이때도 [[IsClassConstructor]] : true 가 사용된다.
2. class User { constructor() {} } console.log(typeof User); // User의 타입은 함수이긴 하지만 그냥 호출할 수 없습니다. User(); // TypeError: Class constructor User cannot be invoked without 'new' console.log(User); // class User { ... }
3. 클래스에 정의된 메서드들은 열거할 수 없다(non-enumerable). 클래스의 prototype 프로퍼티에 추가된 메서드의 enumerable 플래그는 false이다. for-in으로 객체를 순회할 때 메서드는 순회의 대상에서 제외하는 경우가 많기 때문에 이 특징이 꽤 유용하다.
4. 클래스는 항상 엄격모드로 실행된다.(use strict)

클래스 상속

extends 키워드

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} 은/는 속도 ${this.speed}로 달립니다.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} 이/가 멈췄습니다.`);
  }
}

let animal = new Animal("동물");

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} 이/가 숨었습니다!`);
  }
}

let rabbit = new Rabbit("흰 토끼");

rabbit.run(5); // 흰 토끼 은/는 속도 5로 달립니다.
rabbit.hide(); // 흰 토끼 이/가 숨었습니다!

클래스 Rabbit을 사용해 만든 객체는 rabbit.hide() 같은 Rabbit에 정의된 메서드에도 접근할 수 있고 rabbit.run()같은 Animal에 정의된 메서드에도 접근할 수 있다.

이것이 가능한 이유는 키워드 extends 때문인데, 키워드 extends는 프로토타입을 기반으로 동작한다. extends는 Rabbit.prototype.[[Prototype]]을 Animal.prototype으로 설정한다. 그렇기 때문에 Rabbit.prototype에서 메서드를 찾지 못하면 Animal.Prototype에서 메서드를 가져온다.

메소드 오버라이딩

특별한 사항이 없으면 class Rabbit은 class Animal에 있는 메소드를 그대로 상속받는다.

그런데 Rabbit에서 stop()등의 메소드를 자체적으로 정의하면, 상속받은 메소드가 아닌 자체 메소드가 prototype 프로퍼티에 설정된다.

이때 만약, 부모(Animal) 클래스의 메소드를 토대로 일부 기능을 추가하거나 변경해야 할 경우 쓰이는 것이 메소드 오버라이딩이다.

• 메소드 오버라이딩 : 상속 관계에 있는 부모 클래스에서 이미 정의된 메소드를 자식 클래스에서 같은 시그니쳐를 갖는 메소드로 다시 정의하는 것

cf) 오버로딩 : 오버로딩과 헷갈릴 수 있는데 오버로딩은 서로 다른 시그니처를 갖는 여러 메소드를 하나의 이름으로 정의하는 것을 의미한다.

메소드 오버라이딩을 할때는 super 라는 키워드를 사용한다.

• super.method(…)는 부모 클래스에 정의된 메소드 method를 호출한다.
• super(…)는 부모 생성자를 호출하는데, 자식 생성자 내부에서만 사용할 수 있습니다.

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed = speed;
    alert(`${this.name}가 속도 ${this.speed}로 달립니다.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name}가 멈췄습니다.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name}가 숨었습니다!`);
  }

  **stop() {
    super.stop(); // 부모 클래스의 stop을 호출해 멈추고,
    this.hide(); // 숨습니다.
  }**
}

let rabbit = new Rabbit("흰 토끼");

rabbit.run(5); // 흰 토끼가 속도 5로 달립니다.
rabbit.stop(); // 흰 토끼가 멈췄습니다. 흰 토끼가 숨었습니다!

생성자 오버라이딩

위의 예시에 따르면, Rabbit에 자체 constructor가 없다.

이처럼 클래스가 다른 클래스를 상속받고 constructor가 없는 경우에는 아래처럼 “비어있는” constructor가 만들어진다. rabbit 객체를 만들 때 생성자로 “흰 토끼”를 넣을 수 있는 이유이다.

class Rabbit extends Animal {
  // 자체 생성자가 없는 클래스를 상속받으면 자동으로 만들어짐
  constructor(...args) {
    super(...args);
  }
}

이제 Rabbit에 커스텀 생성자를 추가해보자.

커스텀 생성자에서 name과 earLength를 지정하면,

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  // ...
}

class Rabbit extends Animal {

  constructor(name, earLength) {
    this.speed = 0;
    this.name = name;
    this.earLength = earLength;
  }

  // ...
}

// 동작하지 않습니다!
let rabbit = new Rabbit("흰 토끼", 10); // ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

에러가 발생한다.

그 이유는, 상속 클래스의 생성자에서는 반드시 super(…)를 호출해야 하는데, 이를 호출하지 않아 에러가 발생한 것이다. super(…)는 this를 사용하기 전에 반드시 호출해야 한다.

그런데 왜 super(…)를 호출해야 할까?

자바스크립트는 ‘상속 클래스의 생성자 함수(derived constructor)’와 그렇지 않은 생성자 함수를 구분한다. 상속 클래스의 생성자 함수엔 특수 내부 프로퍼티인 [[ConstructorKind]]:”drived” 가 이름표처럼 붙는다.

일반 클래스의 생성자 함수와 상속 클래스의 생성자 함수 간 차이는 new와 함께 드러난다.

• 일반 클래스가 new와 함께 실행되면 빈 객체가 만들어지고 this에 이 객체를 바인딩한다.
• 반면, 상속 클래스의 생성자 함수가 실행되면, 일반 클래스애서 일어난 일이 일어나지 않는다. 상속 클래스의 생성자 함수는 빈 객체를 만들고 this에 이 객체를 할당하는 일을 부모의 클래스 생성자가 처리하기를 기대한다.

조금 더 자세히 보자면

📌 출처 : https://velog.io/@dnr6054/deepdive-constructor

생성자 함수의 인스턴스 생성 과정

생성자 함수의 역할은 인스턴스를 생성하는 것과 생성된 인스턴스를 초기화(인스턴스 프로퍼티 추가 및 초기값 할당)하는 것이다.

// 생성자 함수
function Circle(radius) {
  // 인스턴스 초기화
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius; 
  };
}

// 인스턴스 생성
const circle1 = new Circle(5); // 반지름이 5인 Circle 객체를 생성

이 코드에서는 인스턴스를 생성하고 반환하는 코드는 보이지 않는다. 자바스크립트 엔진이 암묵적인 처리를 통해 인스턴스를 생성하고 반환하기 때문이다.

1. 인스턴스 생성과 this 바인딩
   암묵적으로 빈 객체가 생성된다. 그리고 암묵적으로 생성된 빈 객체, 즉 인스턴스는 this에 바인딩된다. 이 처리는 함수 몸체의 코드가 한 줄씩 실행되는 런타임 이전에 실행된다.
2. 인스턴스 초기화
   생성자 함수에 기술되어 있는 코드가 한 줄씩 실행되어 this에 바인딩 되어 있는 인스턴스를 초기화한다. 즉, this에 바인딩되어 있는 인스턴스에 프로퍼티나 메서드를 추가하고 생성자 함수가 인수로 전달받은 초기값을 인스턴스 프로퍼티에 할당하여 초기화하거나 고정값을 할당한다.
3. 인스턴스 반환
   생성자 내부의 모든 처리가 끝나면 완성된 인스턴스가 바인딩 된 this가 암묵적으로 반환된다.

function Circle(radius) {
  // 1. 암묵적으로 빈 객체가 생성되고 this에 바인딩된다.
  
  // 2. this에 바인딩되어 있는 인스턴스를 초기화한다.
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius; 
  };
  
  // 3. 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.
}

// 인스턴스 생성. Circle 생성자 함수는 암묵적으로 this를 반환한다.
const circle1 = new Circle(5);
console.log(circle); // Circle {radius: 1, getDiameter: f}

다시 돌아와서,

이러한 차이 때문에 상속 클래스의 생성자에선 super를 호출해 부모 생성자를 실행해 주어야 한다. 그렇지 않으면 this가 될 객체가 만들어지지 않아서 에러가 발생한다. 아래 예시와 같이 this 를 사용하기 전에 super() 를 호출하면 Rabbit 의 생성자가 제대로 동작한다.

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  // ...
}

class Rabbit extends Animal {

  constructor(name, earLength) {
    super(name);
    this.earLength = earLength;
  }

  // ...
}

// 이제 에러 없이 동작합니다.
let rabbit = new Rabbit("흰 토끼", 10);
alert(rabbit.name); // 흰 토끼
alert(rabbit.earLength); // 10

 

• 인스턴스
  클래스를 사용하려면 일반적으로 인스턴스를 생성하여 사용한다. 즉, 하나의 클래스로 여러개의 인스턴스를 만들어 사용한다!(재사용)

• 객체
  인스턴스의 다른말로, 둘 다 클래스의 실체를 나타내는 말이다. 보통 클래스를 거푸집에 비유하는데 객체와 인스턴스가 그 거푸집으로 만들어낸 “실체”를 의미한다. 객체와 인스턴스를 명확히 구분하자면, 인스턴스는 new 키워드로 클래스의 실체를 생성할 때 사용하는 용어이고, 객체는 인스턴스 생성 후 클래스에서 제공하는 프로퍼티와 메서드를 사용할 때 사용하는 용어이다.

• 프로퍼티
  클래스 내부에 만드는 변수(멤버변수)를 프로퍼티라고 한다. 프로퍼티에는 주로 객체 내부에서 사용하는 일반적인 정보와 객체 내부 함수(메서드)에서 처리한 결과 값이 저장된다.

• 메서드
  클래스 내부에 선언한 함수를 메서드라고 하며 멤버함수라고도 부른다. 메서드는 주로 객체의 프로퍼티 값을 변경(setter)하거나 알아내는 기능(getter), 클래스를 대표하는 기능 등이 담긴다.