[TIL / JavaScript] class와 상속

• 생성자 함수의 대체재로서 사용된다.
• 기존 자바스크립트에 없던 문법으로 ES6에서 추가되었다.
• 클래스를 알면 다른 언어에서도 저항감 없이 객체지향을 구사할 수 있다.

class Person{
 
}
 
var kim = new Person();
console.log('kim', kim); // kim Person{}

Person이라는 class를 만들어서 생성자 함수를 실행하면 Person이라는 인스턴스가 생성된다

class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
}
 
var kim = new Person('kim', 10, 20);
console.log('kim', kim); // Person { name: 'kim', first: 10, second: 20 }

constructor

• class에서 메소드를 정의할 때는 constructor라는 키워드만으로 정의한다.
• 클래스 내부에 정의한 constructor는 객체를 생성하는 과정에서 먼저 실행된다.
• 다른 함수와 똑같이 인자를 받아 처리할 수 있다.

class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return 'prototype : '+(this.first+this.second);
    }
}
 
var kim = new Person('kim', 10, 20);
kim.sum = function(){
    return 'this : '+(this.first+this.second);
}
var lee = new Person('lee', 10, 10);
console.log("kim.sum()", kim.sum()); // kim.sum() this : 30
console.log("lee.sum()", lee.sum()); // lee.sum() prototype : 30

• 같은 클래스를 가진 객체가 공유하는 메소드를 만들 때 생성자 함수의 프로토타입을 똑같이 사용할 수 있으며, 클래스 내부에 넣어 사용할 수도 있다.

상속

---

class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return this.first+this.second;
    }

위 코드에서 평균을 구하는 메소드를 추가하고 싶을 때

avg(){
	return (this.first+this.second)/2;
}

이렇게 새로운 함수를 만들어서 constructor에 넣어줄 수도 있지만 항상 그럴수는 없다.

• 내가 만든 클래스가 아니라 다른 사람이 제작한 라이브러리라면 수정이 곤란하다.
• 본인이 제작한 코드일지라도 추가할 메소드의 사용빈도가 적을 경우에는 수정에 부담이 있다.

이럴 때 새로운 클래스를 정의해서 해결할 수 있다.

class PersonPlus{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return this.first+this.second;
    }
		avg(){
				return (this.first+this.second)/2;
}

그러나 중복이 발생하게 되는데, 이런 중복을 제거하기 위해 상속을 사용한다.

class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return this.first+this.second;
    }
}
class PersonPlus extends Person{
    avg(){
        return (this.first+this.second)/2;
    }
}
 
var kim = new PersonPlus('kim', 10, 20);
console.log("kim.sum()", kim.sum()); // kim.sum() 30
console.log("kim.avg()", kim.avg()); // kim.avg() 15

extends

• 클래스를 확장한다는 의미를 가진다.

extends Person에 의해 기존 Person 클래스의 요소들이 상속된다. → 중복되는 요소들을 지워도 된다.

• 기존 클래스에 있는 함수를 수정하면 상속받는 객체도 수정된다.

Reference

---

• JavaScript 객체 지향 프로그래밍 by 생활코딩