[JavaScript] 문법(13) 클래스(Class)

 

1. 클래스 기초

• 클래스는 Javascript ES6(ECMAScript6)에 추가된 스펙

 

2. Class 문법과 사용

• constructor(): 생성자 함수로 인스턴스를 생성할 때 실행되는 함수이다.
• Method: 클래스 내에 정의하는 Method는 prototype에 저장된다. Method는 Function과 다름에 주의한다. Method는 특정 객체에 종속된 것으로 객체가 아닌 반면, Function은 객체로 취급된다.

Example Code

class User {
  // 멤버 변수 정의
  grade = "Master";

  // 생성자 함수
  constructor(name, age){
    this.name = name; // this를 써줘야 클래스의 멤버 변수로 남는다 한다.
    this.age = age;
  }
  
  // Method(Function이 아님에 주의)
  showName() {
    console.log(this.name);
  }
}

const citron = new User("Citron", 20);
console.log(citron.grade);
> "master"
console.log(citron.age);
> 20
citron.showName();
> "Citron"

// 참고: Function으로 구현한 User
function User_Fx(name, age) {
  this.name = name;
  this.age = age;
  this.showName = function() {
    console.log(this.name);
  };
}

const citron_fx = new User_Fx("Citron", 20);
citron_fx.showName();
> "Citron"

 

3. Function과의 차이

3.1. Class는 new 키워드 없이 인스턴스 생성이 불가

• Function은 new 키워드 없이 인스턴스 생성을 하면 에러가 발생하지 않지만(undefined) Class는 new 키워드 없이 인스턴스를 생성할 경우 에러가 발생한다.

class User {
  // 생성자 함수
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  
  // Method(Function이 아님에 주의)
  showName() {
    console.log(this.name);
  }
}

const citron = User("Citron", 20); // new 제거
> "Class constructor User cannot be invoked without 'new'"

// 참고: Function으로 구현한 User
function User_Fx(name, age) {
  this.name = name;
  this.age = age;
  this.showName = function() {
    console.log(this.name);
  };
}

const citron_fx = User_Fx("Citron", 20); // new 제거
console.log(citron_fx);
> undefined // 에러 없이 생성되므로 시스템 에러 가능성이 생긴다

 

3.2. Class 내 Method와 Function 내 Function의 위치

• Class: __proto__ 내부에 메서드 있음
• Function: 객체 내부에 Function이 있음
  [참고] 인스턴스 생성 후 인스턴스.prototype.함수이름 = function() {...}; 로 __proto__에 생성할 수는 있다

Example Code: Class

class User {  
  // Method
  showName() {
    console.log("Class");
  }
}

const user = new User();

이미지 넣기: user 변수 내 showName() 위치

 

Example Code: Function

function User_Fx() {
  // Function
  this.showName = function() {
    console.log("Function");
  };
}

const user_fx = new User_Fx();

이미지 넣기:  user_fx 변수 내 showName() 위치

 

 

4. Class의 상속

4.1. 문법과 사용

• java와 유사하다
• extends 키워드를 사용한다

Example Code

class Notebook {
  monitorSize = 15;
  powerOn() {
    console.log("power on..");
  }
};

// Sub
class MacBook extends Notebook {
  os = "MacOS";
  color = "spacegray";
  touchBarOn() {
    console.log("touch bar on..");
  }
};

const mac = new MacBook(); // 인스턴스 생성

console.log(mac.monitorSize); // 부모 변수 접근
> 15
mac.powerOn(); // 부모 메서드 접근
> "power on.."
console.log(mac.os); 
> "MacOS"
mac.touchBarOn();
> "touch bar on.."

• 생성된 인스턴스의 구조는 아래와 같으며, __proto__: Notebook과 같이 상속이 명시되어 있다. 

 

4.2. Method Overriding

• 부모 클래스와 동일한 이름으로 자식 클래스에 메서드가 정의되었을 경우 자식 클래스의 메서드를 호출한다.
• super 키워드를 통해 부모 클래스에 접근할 수 있다.
• 예시 코드

class Notebook {
  powerOn() {
    console.log("power on..");
  }
};

// Sub
class MacBook extends Notebook {
  powerOn() {
    super.powerOn();
    console.log("Welcome to " + this.os);
  }
};

const mac = new MacBook(); // 인스턴스 생성

// Method Overriding: 자식 클래스 메서드 호출
mac.powerOn();
> "Welcome to MacOS"

// __proto__로 부모 클래스에 직접 접근해서 부모의 powerOn() 사용 가능
mac.__proto__.__proto__.powerOn();
> "power on.."

 

4.3. Constructor Overriding(생성자 오버라이딩)

• 자식 클래스의 생성자는 반드시 부모 클래스의 생성자를 먼저 호출해야 한다 → super();
• 자식 클래스에 생성자가 정의되지 않았을 경우 자동으로 부모 클래스의 생성자를 포함한 생성자를 만든다.

Example Code

class Notebook {
  constructor(color) {
    this.color = color;
  }
  
  ...
};

// Sub
class MacBook extends Notebook {
  // 생성자를 정의하지 않을 경우 컴파일러가 자동으로 생성하는 생성자 함수
  constructor(...args) {
    super(...args);
  }

  ...
};

• 자식 클래스 생성자를 별도로 정의할 경우 부모 클래스의 생성자가 받는 인수를 고려해야 한다.

Example Code

// Super: color를 인수로 받는 생성자 함수를 갖고 있다.
class Notebook {
  constructor(color) {
    this.color = color;
  }
};

// Sub1: 인수를 받지 않는 생성자 함수
class MacBook extends Notebook {
  constructor() {
    super();
  }

  showColor(){
    console.log(this.color);
  }
};

const mac = new MacBook();
mac.showColor();
> undefined


// Sub2: 부모 클래스 생성자 함수와 동일한 인수를 받아 넘기는 생성자 함수
class Samsung extends Notebook {
  constructor(color) {
    super(color);
  }

  showColor(){
    console.log(this.color);
  }
};

const samsung = new Samsung("red");
samsung.showColor();
> "red