[JavaScript] 객체 지향 프로그래밍 기본

Song·2021년 6월 27일

JavaScript

목록 보기

3/3

객체 지향 프로그래밍이란, 각 기능들을 상호작용한 객체(모듈)로 만들어 프로그래밍 하는 걸 말한다.
객체는 추상적인 속성(property)과 기능(method) 으로 이루어져 있으며
new 라는 키워드를 통해 구체화된 인스턴스 생성자를 만들어 사용할 수 있다.

객체 지향 프로그래밍은 아래와 같이 크게 4가지 특징을 가지고 있다.

추상화
캡슐화
상속
다형성

Class 생성

ES6 이후부터 'class' 문법이 추가되며 객체를 만들 수 있게되었다.
이때, JS는 프로토타입 기반이므로 class 기반이 아닌 object기반으로 생성이 된다.

class는 객체를 정의하는 것이므로 따로 메모리에 올라가지 않는다.

class Person {
  	// 생성자
    constructor(name, age) {
        this.name = name
        this.age = age
    }	
   // 메소드
    speak() {
        console.log(`${this.name} says hello`)
    }
}

instance object 생성할 시 메모리에 올라간다.

const song = new Person('song',20)

추상화

추상화란, 어떤 구체적인 존재를 원하는 방향으로 간략화해서 나타낸 것이다.
class 도 속성과 행동을 가진 추상화라고 할 수 있다.

이 때 추상화된 객체를 이해할 수 있도록 네이밍과 주석처리를 신경쓰는 것이 좋다.

캡슐화

클라스 내 특정 속성에 직접적으로 접근하는 대신 다른 메소드를 통해 접근하게 하는 것을 캡슐화라고 한다.
캡슐화를 하게 되면 사용자는 속성의 값을 함부로 변경하지 못하고 주어진 조건에 맞을 때에만 바꿀 수 있게 된다.

캡슐화에 사용되는 메소드는 getter와 setter가 있다.

위에서 만든 Person class의 getter 메소드
    get age() {
        return this._age;
    }
age의 값이 0 이하로 변경되지 않도록 setter를 통해 조건을 추가해준다.
변수 앞에는 '_' 를 앞에 붙여주어 set 함수를 무한으로 호출되는 것을 방지해준다.
    set age(value) {        
        this._age = value < 0 ? 0 : value 
    }
결국 위 class의 constructor 정의한 age는 get age()를 통해 값이 반환되고 set age()를 통해 값이 할당되게 된다.

상속

클래스가 다른 클래스의 프로퍼티와 속성을 그대로 전달받는 것을 '상속'받는다고 한다.
이 때 상속받은 클래스는 자식, 상속를 한 클래스는 부모라고한다.

위에서 만든 클래스를 상속 받은 자식 클래스
'extends' 키워드를 사용하여 상속받을 수 있다.
class Student extends Person {
  study() {
    console.log("let's study")
  }	
}

오버라이딩

부모 클래스의 메소드를 상속받되 기능을 재정의하는 것을 '오버라이딩' 이라고 한다.

부모 클래스의 speak()를 오버라이딩하여 재정의하였다.
  speak() {
    console.log("I need to sleep")
  }	
만약 오버라이딩하되 부모 메소드의 기능도 같이 사용하고 싶다면 super로 호출하면된다.
  speak() {
    super.speak()
    console.log("I need to sleep")
  }	

다형성

다형성이란 다양한 객체를 가리키고 있는 하나의 변수를 말한다.
보통 자식클래스가 부모클래스의 메소드를 오버라이딩 할 때 사용되며 이렇게
상속관계에 있는 여러 객체들 내 동일한 이름의 메소드들을 간결한 코드로 호출할 수 있다.

미리 생성해 놓은 부모클래스와 자식클래스의 인스턴스 생성자를 하나씩 만들어주고
const person = new Person('song',20)
const student = new Student('may',20)
total_actions 변수에 생성자를 넣어준다.
total_actions = [person, student]
speak()이라는 동일한 이름의 메소드를 forEach내에서 실행시키면
total_actions.forEach((action) => {
	action.speak()
})
쯔아잔
아래와 같은 출력 결과가 나온다.