Class 개념정리 (ft. 객체지향적 프로그래밍 OOP) - 1
class 에 대해서 다시 짚고 넘어갈 필요할 것 같아 다시 개념정리를 해본다.
이 class는 객체지향적 프로그래밍과 관련있으므로 이 OOP도 한번 정리해본다.
객체지향적 프로그래밍 (OOP / Object-Oriented Programming)
1. 캡슐화 Encapsulation
- 데이터와 그 데이터를 활용하는 함수를 한 캡슐, 컨테이너 안에 잘 정리하는 것을 의미한다.
여기서 그 캡슐 역할을 하는 게 class이며, 위에서 가리키는 데이터는 속성이고 그 속성을 쓰는 함수가 메소드이다.
- 또한 캡슐화를 통해 공개할 데이터와 숨길 데이터에 대한 구분이 가능해진다. (public,protected,private 사용)
( https://yjleekr.tistory.com/73 : 타입스크립트 공부할 때, 정리해둔 포스팅)
2. 상속 Inheritance
- 상속성을 이용해서 중복되지않게끔 코드를 작성할 수 있다. (extends, super 키워드)
- 이로 인해 코드를 더 작은 단위로 쪼갤 수 있고, 코드의 재사용성이 높아진다.
3. 추상화 Abstraction
- 구현 세부정보를 숨기는 일반 인터페이스를 지정하는 행위?
- 특정 메소드의 내부 작업을 수정한다고 할지라도 그 메소드를 사용하는 누구든 뭔가 바꿀 필요가 없다. 즉, 구현 세부내용이 바꼈더라도 인터페이스는 그대로 유지되기 때문이다..
4. 다형성 Polymorphism
- 부모클래스를 상속해와서 메소드를 변형시킬순 있지만, 그 자체 메소드가 가진 타입이라던지, 어떻게 작동해야하는지는 규칙이 정해져있다.
class
객체를 찍어내는 함수와도 비슷하다. 어렵게 말하자면, 인스턴스를 생성하기 위한 생성자 함수이다.
클래스 몸체 내에서 정의할 수 있는 메서드 총 3가지
1. constructor(생성자)
- 인스턴스를 생성하고 초기화하기 위한 특수한 메서드
- 프로퍼티가 추가되어 초기화된 인스턴스를 생성하려면, constructor 내부에서 this에 인스턴스 프로퍼티를 추가해준다.
- 클래스 외부에서 인스턴스 프로퍼티를 만들어주려면, 매개변수를 선언하고 인스턴스 생성시 (new) 인자로 그 값을 전달한다.
2. 프로토타입 메소드
- 클래스 몸체에서 정의한 메소드 / 인스턴스는 클래스의 프로토타입 메소드를 상속받아 사용할 수 있다.
- 해당 메소드를 사용하려면 new 연산자로 인스턴스를 생성한 후 그 인스턴스에서 호출해서 쓴다.
3. 정적 메소드 (static)
- 인스턴스를 생성하지 않아도 클래스 자체로 호출할 수 있는 메소드이다. (자바스크립트로 블럭 만들기 :https://yjleekr.tistory.com/71)
- 정적 메소드가 바인딩된 클래스는 인스턴스의 프로토타입 체인 상에 존재하지 않는다. 즉, 인스턴스로 클래스의 메소드를 상속받을 수 없어서 인스턴스는 클래스의 정적 메소드를 호출하지 못한다.
class Person {
// 생성자 메서드
constructor(name) {
// 인스턴스 생성 및 초기화
this.name = name;
}
// 프로토타입 메서드
sayHi() {
console.log(`hi! this is ${this.name}`);
}
// 정적 메서드
static sayMore() {
console.log("so happy to meet u");
}
}
// 인스턴스 생성
const me = new Person("yjlee");
console.log(me.name); // yjlee
// 프로토타입 메서드 호출
me.sayHi(); // hi! this is yjlee
// 정적 메서드 호출
Person.sayMore(); // so happy to meet u
클래스를 하나의 완전히 다 만들어진 완전체로 만들기보다는 원하는 기능을 끼워맞춰서 재조립이 가능한 형태로 만드는 것이 중요하다! 아래의 간단한 케이스들로 이 말을 이해할수있다.
case1.
아래처럼 클래스를 하나의 완전체로 만들어버리면 해당 클래스 사용 시 응용하거나 조절하는 것이 불가능하다.
class Counter {
constructor() {
this.counter = 0;
}
increase() {
this.counter++;
if (this.counter % 5 === 0) {
console.log(this.counter, "show per 5times");
}
}
}
const counter = new Counter();
counter.increase();
counter.increase();
counter.increase();
counter.increase();
counter.increase(); // 5 'show per 5times'case2.
그래서 increase의 인자로 콜백함수를 전달하면 해당 클래스 사용자가 특정 메소드를 실행함에 있어서 컨트롤이 가능하다.
하지만 매번 해당 메소드를 호출할 때 해당 콜백함수를 인자로 넣어줘야하므로 불편하다.
class Counter {
constructor() {
this.counter = 0;
}
increase(run5times) {
this.counter++;
if (this.counter % 5 === 0) {
run5times(this.counter);
}
}
}
const counter = new Counter();
function printsth(num) {
console.log("hi", num);
}
counter.increase(printsth);
counter.increase(printsth);
counter.increase(printsth);
counter.increase(printsth);
counter.increase(printsth); // hi 5case3.
따라서, 이를 개선하기 위해 constructor에서 콜백함수를 인자로 받는다.
이렇게 하면 아래 예시처럼 인스턴스 생성시에 콜백함수를 인자로 넣어주면 다양한 기능의 인스턴스 생성이 가능할 뿐만 아니라, 메소드 호출 시 일일이 콜백함수를 넣어주지 않아도 된다.
근데 여기서 만약, 인스턴스 생성 시에 인자로 콜백함수를 안 받는다면, 메서드 호출 시 에러가 난다. 이를 방지해주기 위해서 타입스크립트에선 constructor 인자를 optional하게 받으면 해결되지만, js에선 에러 방지를 위해 아래와 같이 && 연산자를 써줘야한다.
class Counter {
constructor(runEvery5) {
this.counter = 0;
this.callBack = runEvery5;
}
increase() {
this.counter++;
if (this.counter % 5 === 0) {
this.callBack(this.counter);
}
}
}
function printsth(num) {
console.log("hi", num);
}
function alertSth(num) {
alert("hi", num);
}
const printCounter = new Counter(printsth);
const alertCounter = new Counter(alertSth);
printCounter.increase();
printCounter.increase();
printCounter.increase();
printCounter.increase();
printCounter.increase(); // hi 5
alertCounter.increase();
alertCounter.increase();
alertCounter.increase();
alertCounter.increase();
alertCounter.increase(); // hi 5 알림창
클래스의 재사용성을 위해 하나의 클래스로 다양한 오브젝트를 생성, 서로 다른 기능을 하는 오브젝트를 만드는게 중요!