안녕하세요~오랜만에 돌아온 로그마스터입니다
팀프로젝트도 하고 공모전도 참가하고 하다보니 한달만에 포스트를 올리게 되었네요 ㅜㅠ
이제 저는 프론트엔드에 대한 학습을 마치고 백엔드에 들어섰습니다
node.js를 처음 써보게 되었는데 아직 서툴지만 앞으로 더더욱 능숙하게 사용하기 위해
열심히 로그를 찍어야겠습니다!
1. Class란?
- 객체 지향 프로그래밍(OOP)에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀입니다.
클래스(객체의 설계도)를 이용해서 실제 객체를 만드는 과정을 인스턴스화라고 함
- 예제코드
// Class 선언
class Car {
// 생성자 전달
constructor(brand, color) {
this.brand = brand;
this.color = color;
}
// 메소드 선언
drive() {
console.log(`${this.brand}의 ${this.color}색 자동차가 주행 중입니다`);
}
}
const hyundai = new Car('hyundai', 'blue');
const porsche = new Car('porsche', 'black');
const toyota = new Car('toyota', 'silver’);
console.log(hyundai.brand);
porsche.drive();
toyota.drive();- class를 생성자 함수로 쓴 코드
function Car(brand, color) {
this.brand = brand;
this.color = color;
this.drive = function () {
console.log(`${this.brand}의 ${this.color}색 자동차가 주행 중입니다`);
};
}
const hyundai = new Car('hyundai', 'blue');
const porsche = new Car('porsche', 'black');
const toyota = new Car('toyota', 'white');
console.log(hyundai.brand);
porsche.drive();
toyota.drive();
- 암묵적으로 strict mode가 기본적으로 실행됨
- var와 let, const의 관계를 떠올리면 편하다.
- 상속이 더 편리
- 생성자 함수 → 프로토 타입 체인으로 상속
- 클래스 → extends 키워드로 상속
- 정적 메서드 사용 방식이 다름
- 생성자 함수 → 함수 몸체에 직접 추가
- 클래스 → Static 키워드 사용
2. 상속
• 기존의 클래스의 틀을 토대로 새로운 클래스를 만들 수 있음
• 기존 클래스의 변수, 메소드 등을 그대로 가져가면서 자신이 원하는 변수, 메소드를 추가 또는 변경해서 사용이 가능
• 상속은 Extends를 이용해서 쉽게 가능
-> class 상속할 클래스 이름 extends 상속받을 클래스 이름 class ElecCar extends Car {}
• 부모 요소의 것을 그대로 받아올 때는 super를 사용
3. overriding
• 자바스크립트 객체의 상속받은 부모의 메소드를 재정의하는 것을 의미
• 오버라이딩이라는 개념은 존재하지만 자바같은 언어와는 다름 매개변수가 자유롭고, 리턴값의 자료형도 자유롭다
오버라이딩,(method overriding)은 자식 클래스가 자신의 부모 클래스들 중 하나에 의해 이미 제공된 함수 등을 특정한 형태로 구현하는 것을 말한다. 부모 클래스에서 이미 정의된 함수 등을 자식 클래스에서 같은 이름으로 사용하되 안에 들어가는 내용(기능, 속성 등)을 바꿔서 사용한다고 생각하면 된다.
흔히 부모와 자식 사이에서 형제들이 유전적으로 물려받는 부분은 같아도 어떻게 먹고, 어떻게 자고, 어떻게 생활하냐에 따라 키, 외모, 공부 성적 등이 달라지듯 자식 클래스도 상속 받은 부모 클래스의 기능들을 어떻게 바꿔서 사용하는지에 따라 그 기능이 달라지게 된다. 그것을 프로그래밍에서는 Overriding(오버라이딩)이라고 합니다.
부모 클래스 버전을 사용할 것이냐, 자식 클래스 버전을 사용할 것이냐는 호출되었을 때 사용되는 객체에 따라 달라지게 된다. 만약 부모 클래스의 객체가 함수를 발생시키는데 사용된다면 부모 클래스 버전이 실행되고, 자식 클래스의 객체가 함수를 발생시키는데 사용된다면 자식 클래스 버전이 사용될 것이다.
class Triangle extends shape {
// overiding
draw() {
super.draw();
console.log('🔺');
}
getArea() {
return (this.width * this.height) / 2;
}
// Object를 상속받았기 때문에 toString을 사용할 수 있음
toString() {
return `Triangle: color: ${this.color}`;
}
}
const triangle = new Triangle(20, 20, 'red');
triangle.draw(); // drawing red color of 🔺
console.log(triangle.getArea()); // 200
console.log(triangle.toString()); // Triangle: color: red
