class
를 선언하는 것은 하나의 틀을 만드는 것과 비슷하다.
class
라는 틀 안에 찍어내고 싶은 내용들의 정보들을 저장 후 new
객체를 생성하여 class
안의 내용들을 꺼내와서 여러 형태로 찍어낸다.
// 클래스 선언문
class Person {
// constructor(생성자)
constructor(name, age) {
this.name = name;
this.age = age;
}
introduce() {
console.log(`Hi ${this.name}`);
}
}
const me = new Person('bohun', 25); //instance
const you = new Person('brown', 30); //instance
console.log(me.name, me.age); //bohun 25
console.log(you.name, you.age); //brown 30
me.introduce(); //Hi bohun
instance
는 클래스의 정의를 통해 새롭게 생성되는 object 객체
를 의미한다.
instance
는 new
연산자를 꼭 사용해야한다.
class Person { }
const a = new person()
constructor
는 인스턴스를 생성하고 클래스 필드를 초기화 하기 위한 메소드이다.
클래스 필드
란 클래스 내부의 캡슐화된 변수를 말하며,constructor
함수에서 this에 추가한 프로퍼티를 클래스 기반 객체지향 언어에서 클래스 필드라고 한다.class Person {
constructor(name) {
// this는 클래스가 생성할 인스턴스를 가리킨다.
// name은 클래스필드 이다.
this.name = name;
}
// 클래스 몸체
}
const a = new Person('brown')
console.log(a) // Person {name: 'brown'}
특징
constructor
는 클래스 내에 한 개만 존재 해야한다.constructor
이며 constructor
파라미터는 클래스필드에 할당된다.getter , setter
가 필요한 이유는
사용자 누구나 값을 바꿀 수 없도록 캡슐화
하여 정보를 숨겨야 하는 역할과
객체로써 말이 되지 않는 값을 넣었을 때 사전에 알려 미리 방지
할 수 있도록
정보를 보호 할 수 있는 역할을 할 수 있도록 하는 것이 getter , setter
이다.
class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
}
const a = new User('bohun', 'kim', -1);
console.log(object);
const a = new User('bohun', 'kim', -1);
부분에서 사람의 나이 부분의 매개변수를 -1
로 지정했을 경우를 가정했을 때 사람의 나이가 -1
은 말이 되지 않는다.
이 때 getter , setter
를 이용하여 수정을 거쳐 출력할 수 있는데
수정하면 이러하다.
class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
//값을 리턴
get age() {
return this._age;
}
//값을 설정
set age(value) {
if (value < 0) {
throw Error('age can not be negative');
}
this._age = value;
}
}
const a = new User('bohun', 'kim', -1);
console.log(a.age); //main.js:16 Uncaught Error: age can not be negative
get
을 이용하여 값을 받아 set
으로 넘긴 후 안에서 값을 설정한다.
개발자가 set
에서 미리 조건을 넣어 생성된 인스턴스에서 말이 안되는 값을 넣으려고 할 때 막을 수 있도록 해줄 수 있다.
이렇게 되면 사용자는 나이의 값만 바꿀 수 있을 뿐 옳지 않은 값을 넣을 수 있는 경우는 없게 된다.
extends
는 부모클래스를 상속받는 자식클래스를 정의할 때 사용한다.
//부모 클래스
class Shape {
constructor(width, height, color) {
this.width = width;
this.height = height;
this.color = color;
}
draw() {
console.log(`drawing ${this.color} color!`);
}
getArea() {
return this.width * this.height;
}
}
//부모클래스에서 상속받은 자식 클래스 Rectangle
class Rectangle extends Shape {}
//새로 인스턴스시킨 자식클래스 Rectangle
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw(); //drawing blue color!
console.log(rectangle.getArea()); //400
class Rectangle extends Shape {}
에서 부모클래스 Shape
를 상속받아 새로 인스턴스를 만들어 매개변수를 입력하면 Shape
와 동일하게 사용 가능하다.
overriding
은 부모 클래스에 있던 기존의 함수를 상속받은 자식 클래스 안에 재정의하여 사용할 수 있는 방식이다.
//부모 클래스
class Shape {
constructor(width, height, color) {
this.width = width;
this.height = height;
this.color = color;
}
draw() {
console.log(`drawing ${this.color} color!`);
}
getArea() {
return this.width * this.height;
}
}
//부모클래스에서 상속받은 자식 클래스 Triangle
class Triangle extends Shape {
getArea() {
return (this.width * this.height) / 2;
} // overriding : 필요한 함수만 재정의하여 사용할 수 있다.
}
const triangle = new Triangle(20, 20, 'red');
triangle.draw(); //drawing red color!
console.log(triangle.getArea()); //200
상속받은 Triangle
안에 부모클래스 Shape
의 필요한 함수를 가져와 새로 정의하여 계산에 사용한 모습니다.
super
키워드는 부모클래스를 호출하고 싶을 때 사용한다.
//부모 클래스
class Shape {
constructor(width, height, color) {
this.width = width;
this.height = height;
this.color = color;
}
draw() {
console.log(`drawing ${this.color} color!`);
}
getArea() {
return this.width * this.height;
}
}
//부모클래스에서 상속받은 자식 클래스 Rectangle
class Triangle extends Shape {
draw() {
super.draw(); //drawing red color!
console.log('🇨🇷'); //🇨🇷
}
}
const triangle = new Triangle(20, 20, 'red');
triangle.draw();
Triangle
이 상속을 받고 overriding
을 했을 때 부모클래스에 있던 참조가 무시되어 출력된다.
이 때 super
키워드를 이용하여 부모클래스의 참조시킬 수도 있고 새롭게 overriding
된 내용도 출력할
수 있다.
참고자료
드림코딩 엘리 - 클래스
클래스 자료