JS Class

🦄 Js Class

우선 ES5전 까지는 비슷한 종류의 객체를 많이 찍어내기 위해 생성자를 사용해왔다.

// 생성자
function Person({name, age}) {
  this.name = name;
  this.age = age;
}
Person.prototype.introduce = function() {
  return `안녕하세요, 제 이름은 ${this.name}입니다.`;
};

const person = new Person({name: 'tiger', age: 22});
console.log(person.introduce()); 

console.log(typeof Person); 
console.log(typeof Person.prototype.constructor); 
console.log(typeof Person.prototype.introduce); 
console.log(person instanceof Person); // true

• 그후 ES5가 되면서 도입 된 클래스는 생성자의 기능을 대체한다.
• class 표현식을 사용하면, 훨씬 더 깔끔한 문법으로 정의할 수 있다.

🤖 여기서 Class란?

• 내가 쉽게 이해하기로는 큰 틀이라고 생각하면 쉽다.
• 예를 들어 사람(이름,나이,성별)을 가지고있는 공통 분모 같은 느낌이다.

// 클래스
class Person {
  // 이전에서 사용하던 생성자 함수는 클래스 안에 
 // `constructor`라는 이름으로 정의합니다.
  constructor({name, age}) {
    this.name = name;
    this.age = age;
  }

  // 객체에서 메소드를 정의할 때 사용하던 문법을 그대로 사용하면,
  // 메소드가 자동으로 `Person.prototype`에 저장됩니다.
  introduce() {
    return `안녕하세요, 제 이름은 ${this.name}입니다.`;
  }
}

const person = new Person({name: 'tiger', age: 22});
console.log(person.introduce());  
console.log(typeof Person); 
console.log(typeof Person.prototype.constructor);
console.log(typeof Person.prototype.introduce); 
console.log(person instanceof Person); // true

🛑 주의 할점.

• class는 함수가 아니다.

class Person {
  console.log('hello');
}

• class는 객체가 아니다.

class Person {
  prop1: 1,
  prop2: 2
}

🤖 ES5 생성자와 ES5 클래스의 차이점.

• 클래스는 함수로 호출될 수 없다.
• 클래스 선언은 let과 const처럼 블록 스코프에 선언되며, 호이스팅(hoisting)이 일어나지 않다.
• 클래스의 메소드 안에서 super 키워드를 사용할 수 있다.

🦄 Class 상속(Class Inheritance)

 class Parent {
 
 }
 class Child extends Parent {
 
 }

• 여기서 보면 부모와 자식간의 Parent 클래스를 Child가 상속 받는다.
• 보이다 싶이 extend로 상속이 가능하다

🤖 상속을 하게되면 가능한것

• 자식 클래스 A를 통해 부모 클래스 B의 정적 메소드와 정적 속성을 사용할 수 있습니다.
• 부모 클래스 B의 인스턴스 메소드와 인스턴스 속성을 자식 클래스 A의 인스턴스에서 사용할 수 있습니다.

class Parent {
  static staticProp = 'staticProp';
  static staticMethod() {
    return 'I\'m a static method.';
  }
  instanceProp = 'instanceProp';
  instanceMethod() {
    return 'I\'m a instance method.';
  }
}

class Child extends Parent {}

console.log(Child.staticProp); // staticProp
console.log(Child.staticMethod()); // I'm a static method.

const c = new Child();
console.log(c.instanceProp); // instanceProp
console.log(c.instanceMethod()); // I'm a instance method.

🤖 super

• 앞서 봤듯이, 자식 클래스에서 부모 클래스의 정적 속성과 인스턴스 속성에 접근할 수 있지만, 자식 클래스에 같은 이름의 속성을 정의한 경우 문제가 생긴다.

class Melon {
  getColor() {
    return '제 색깔은 초록색입니다.';
  }
}

class WaterMelon extends Melon {
  getColor() {
    return '속은 빨강색입니다.';
  }
}

const waterMelon = new WaterMelon();
waterMelon.getColor(); // 속은 빨강색입니다.

• 이런경우 super 키워드를 통해서 부모 메소드에 직접 접근하여 변경 할 수 있다.

class Melon {
  getColor() {
    return '제 색깔은 초록색입니다.';
  }
}

class WaterMelon extends Melon {
  getColor() {
    return super.getColor() + ' 하지만 속은 빨강색입니다.';
  }
}

const waterMelon = new WaterMelon();
waterMelon.getColor(); // 제 색깔은 초록색입니다. 하지만 속은 빨강색입니다.

🤖 super 키워드의 동작 방식

• 생성자 내부에서 super를 함수처럼 호출하면, 부모 클래스의 생성자가 호출된다.
• 정적 메소드 내부에서는 super.prop과 같이 써서 부모 클래스의 prop 정적 속성에 접근할 수 있다.
• 인스턴스 메소드 내부에서는 super.prop과 같이 써서 부모 클래스의 prop 인스턴스 속성에 접근할 수 있다.

🤖 클래스 상속과 프로토타입 상속

• 클래스 상속은 내부적으로 프로토타입 상속 기능을 활용하고 있다.
• 아래 코드의 클래스 상속에 대한 프로토타입 체인을 그림으로 나타내보면 다음과 같이 된다.

class Person {}
class Student extends Person {}
const student = new Student();

• 이와같이 부모클래스의 메소드와 이름이 같은 메소드를 자식클래스에서 정의하는것을 보고 메소드 오버라이딩 이라고 한다.

출처:https://helloworldjavascript.net/pages/270-class.html