[Javascript] 자바스크립트에서 Class 사용하기-constructor, extends, super 사용법

🔮 Class 🔮

• ES6에서부터 지원
• 익스플로러에서는 사용 불가
• 재사용성 👍

✨ class 기본 문법

class 생성하기

class Person {
}

let kim = new Person();
console.log(kim);

class로 만들어준 예시 Person 이라는 이름의 객체가 생성된다

class 초기값 설정해주기

Constructor(생성자)를 이용하면 class 객체의 초기값을 설정해줄 수 있다.
class 내부에서 constructor는 한 개만 존재할 수 있으며, 2개 이상 사용하면 Syntax Error가 발생함

class Person{
	constructor(name,age,city){
      this.name = name;
      this.age = age;
      this.city = city;
    }
}

let kim = new Person('Kim', '24', 'Seoul');

console.log(kim);

constructor

[JavaScript] ES6 Class의 생성자(constructor) 함수
객체(인스턴스)를 생성하고 클래스 필드를 초기화하기 위한 특수한 메소드.
※ 클래스 필드 : 자바스크립트의 생성자 함수에서 this에 추가한 프로퍼티

constructor는 새로운 클래스를 생성할 때 가장 처음 실행되며 초기값을 설정해준다.

// 클래스 선언문
class Person {
  // constructor(생성자). 이름을 바꿀 수 없다.
  constructor(name) {
    // this는 클래스가 생성할 인스턴스를 가리킨다.
    // _name은 클래스 필드이다.
    this._name = name;
  }
}
 
// 인스턴스 생성
const me = new Person('Lee');
console.log(me); // Person {_name: "Lee"}

클래스는 constructor라는 이름을 가진 특별한 메서드를 하나씩만 가질 수 있다. 2개 이상일 시 SyntaxError을 유발한다.

인스턴스를 생성할 때 new 연산자와 함께 호출한 것이 바로 constructor이며 constructor의 파라미터에 전달한 값은 클래스 필드에 할당한다.

constructor은 생략할 수 있다. 생략하면 클래스에 constructor(){ }를 포함한 것과 동일하게 동작한다.

따라서 인스턴스에 프로퍼티를 추가하려면 인스턴스를 생성한 이후 프로퍼티를 동적으로 추가해야 한다.

class Person { }
 
const me = new Person();
console.log(me); // Person {}
 
// 프로퍼티 동적 할당 및 초기화
me._name = 'daeun';
console.log(me); // Person {_name: "daeun"}

constructor는 인스턴스의 생성과 동시에 클래스 필드의 생성과 초기화를 실행한다.
따라서 클래스 필드를 초기화해야 한다면 constructor를 생략해서는 안된다.

class Person {
  constructor(name) {
    this._name = name;
  }
}
 
const me = new Person('daeun');
console.log(me); 

class 메소드 사용하기

class에서 설정한 초기값을 접근해 특정 기능을 하는 메소드를 만드는 것도 가능하다
class 안에 function 형식으로 만들어준 뒤 해당 메소드를 호출하기만 하면 된다

내년에 해당 사람이 한 살 더 먹는다는 메소드를 class 안에 정의한 뒤 호출해보면

class Person{
	constructor(name,age,city){
 	this.name = name;
 	this.age = age;
 	this.city = city;
	}
  //메소드 생성
  nextYearAge(){
  	return Number(this.age) + 1;
  }
}
let kim = new Person('kim','24','Seoul');

console.log(kim.nextYearAge());

class는 javascript상 객체 의 형태이므로 생성된 class 객체에 class 밖에서 새로운 메소드를 넣는 것도 가능하다

class Person{
	constructor(name,age,city){
 	this.name = name;
 	this.age = age;
 	this.city = city;
	}
  //메소드 생성
  nextYearAge(){
  	return Number(this.age) + 1;
  }
}
let kim = new Person('kim','24','Seoul');

kim.eat = function(){
	return 'apple'
}

console.log(kim.nextYearAge());
console.log(kim.eat());

하지만 이렇게 밖에서 추가한 class는 나중에 새로운 new Person class로 새로운 객체를 만들때는 호출해서 사용할 수 없다

class Person {
    constructor (name,age,city) {
        this.name = name;
        this.age = age;
        this.city = city;
    }
    //메소드생성
    nextYearAge() {
        return Number(this.age) + 1;
    }
}

let kim = new Person('Kim','24','Seoul');

kim.eat = function () {
    return 'apple'
}

console.log('김씨 내년에는 몇살인가요 ?' + kim.nextYearAge());
console.log('김씨가 먹은건? ' + kim.eat());

let park = new Person('Park', '31', 'busan');

console.log('박씨 내년에는 몇살인가요?' + park.nextYearAge());
console.log('박씨가 먹은건?' + park.eat());

park class에서 eat() 함수 호출 시 실행되지 않는 모습

✨ 상속(extends)

class에서 상속개념을 이용할 수 있습니다.

class Person {
    constructor (name,age,city) {
        this.name = name;
        this.age = age;
        this.city = city;
    }
    //메서드생성
    nextYearAge() {
        return Number(this.age) + 1;
    }
}

class introducePerson extends Person {
    introduce () {
        return `저는 ${this.city}에 사는 ${this.name} 입니다.`
    }
}

let kim = new introducePerson('Kim','24','Seoul');

console.log(kim.introduce());

introducePerson클래스에서 Person을 상속받았기 때문에
this.city와 this.name을 모두 사용할 수 있는 것을 확인할 수 있다.

✨ super 사용하기

introducePerson 하위클래스에서 기존 class의 값을 가져다 쓰는 건 좋았지만,
추가적으로 introducePerson이라는 하위 클래스에서만 사용하고 싶은 값이 있을 수 있다.

이 때 이용하는 것이 super라는 키워드이며,
이는 객체의 부모가 가지고 있는 메소드를 호출할 수 있다.

자식 쪽에 추가적으로 사용할 초기값이 필요할 경우 constructor에 super로 부모 초기값을 세팅한 뒤 자식 class에서만 사용할 초기값만 따로 지정하는 것도 가능하며 super 기능을 이용해서 자식 class에서 부모 메소드를 호출할 수도 있다.

class Person {
    constructor (name,age, city) {
        this.name = name;
        this.age = age;
        this.city = city;
    }
    //메서드생성
    nextYearAge() {
        return Number(this.age) + 1;
    }
}

class introducePerson extends Person {
    constructor(name, age, city, futureHope) {
        super(name, age, city);
        this.futureHope = futureHope
    }
    introduce () {
        return `저는 ${this.city}에 사는 ${this.name} 입니다. 
            내년엔 ${super.nextYearAge()}살이며,
            장래희망은 ${this.futureHope} 입니다.`
    }

}

let kim = new introducePerson('Kim','24','Seoul', '개발자');

console.log(kim.introduce());

class를 이용할 경우 규칙성을 갖는 객체를 일관성 있게 만드는 게 가능하며,
상속을 통해서 기능 확장이 용이하다는 것 알 수 있었다.