class는 객체를 생성하기 위한 템플릿으로 생성자함수(porotype의 원리)로 동작을 하게 됩니다. 또한 이 class를 이용하면 prototype보다 더 간결하게 생성자 함수를 생성할 수 있습니다.
function Person(name, age) {
this.name = name;
this.age = age;
}
class Person {
constructor(name, age){
this.name = name;
this.age = age;
}
}
생성자함수, class로 인스턴스를 생성할 때 new연산자를 활용해서 만들 수 있다는 점에서 크게 다를 것은 없습니다. 또한 single literal object도 객체이지만 하나의 인스턴스로 볼 수 있습니다.
자바스크립트의 생성자함수로 인스턴스를 만들어던 과정을 class를 활용해 리팩토링 해보도록 하겠습니다.
function Person(name, age, location) {
this.name = name;
this.age = age;
this.location = location;
}
Person.porototype.getName = function name(params){
return this.name + '입니다';
}
class
는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성이 됩니다.
class Person {
constructor(name, age, location) {
this.name = name;
this.age = age;
this.location = location; //멤버변수
}
getName(){
return this.name + '입니다'; //메소드
};
}
이렇게 class를 이용해 편리하게 사용을 할 수 있기에 생성자함수 보다는 class를 적극적으로 활용해 사용하기를 권장합니다.
또한 class는 이 외에도 프라이빗 키워드, 정적 메서드 등 수많은 기능들을 제공하며, react, vue에서도 class컴포넌트를 사용하기에 이 강력한 class를 잘 익혀두시길 바랍니다.
//super class
function Animal(name, sound) {
this.name = name;
this.sound = sound;
}
//기능 부여
Animal.prototype.getInfo = function () {
return this.name + '가(이)' + this.sound + '소리를 낸다.'
}
//Sub class
function Friends(name, sound) {
Animal.call(this, name, sound) //명시적 this 바인딩
}
//프로토타입 연결 : 연결이 안된다면 dog.getInfo()에 typeerror가 발생합니다.
Friends.prototype = Object.create(
Animal.prototype,
)
//super class
class Animal {
constructor(name, sound) {
this.name = name;
this.sound = sound;
}
getInfo() {
return this.name + '가(이)' + this.sound + '소리를 낸다.'
}
}
//sub class
class Friends extends Animal {
constructor(name, sound) {
super(name, sound) //super을 사용해 부모의 생성자함수를 호출합니다.
}
}
이렇게 생성자 함수를 이용할 필요 없이 자바스크립트에서 제공하는 class를 사용해 확장을 쉽게 할 수 있습니다. 게다가 일종의 템플릿처럼 키워드들만 잘 활용해도 복잡한 내부동작을 굳이 코드로 구현하지 않아도 되기에, class를 적극적으로 활용해 사용하기를 권장합니다.