Skip to content
solheee
GitHubContact

TIL - 객체 지향 프로그래밍

— TIL, JS — 1 min read

Object Oriented Programming

절차지향 & 객체지향

절차적 언어

객체 지향 프로그래밍이 등장하기 이전에 절차적 언어가 있었다. 절차적 언어에는 대표적으로 C언어가 있다.

절차적 언어는 순차적인 명령의 조합으로, 순차적인 처리가 중요시 되며, 컴퓨터의 처리구조와 유사해 실행속도가 빠르다

객체 지향 언어

객체 지향 프로그래밍에서는 데이터와 기능을 하나로 묶어 처리한다. 자바스크립트는 객체 지향 언어는 아니지만, 객체 지향 패턴으로 작성 가능하다.

OOP 객체지향 프로그래밍

OOP의 주요 컨셉

  • 캡슐화: 데이터와 기능을 하나로 묶는 것, 데이터를 감추고 외부와 상호작용은 메소드를 활용
  • 상속: 이미 작성된 클래스를 받아 새로운 클래스를 생성하는 기법 (코드 재활용)
  • 추상화
  • 다형성: 하나의 이름(방법)으로 여러 상황에 대처하는 기법으로, 같은 이름을 가진 메소드가 객체의 특성에 맞게 조금씩 다르게 작동하는 것??

클래스와 인스턴스

클래스는 일종의 원형으로, 세부사항을 포함하지 않은 청사진이다.

인스턴스는 클래스의 사례(instance)이다. 클래스를 통해 만들어진 객체를 인스턴스라고 부른다.

자바스크립트의 OOP

자바스크립트는 클래스 기반 객체지향 프로그래밍 언어와 달리, 프로토타입 기반 객체 지향 프로그래밍 언어이다.

  • prototype이란, 객체의 원형이다.
  • 프로토타입은 객체를 확장하고, 객체 지향적인 프로그래밍을 할 수 있게 해준다
  • 생성자 함수는 prototype이라는 프로퍼티를 갖는다.
  • prototype 프로퍼티는 용도가 약속된 특수한 프로퍼티이다.

Prototype Chain

프로토타입은 상속이 가능하다. 프로토타입 객체로부터 메소드와 속성을 상속 받을 수 있고, 그 상위 프로토타입 객체 또한 마찬가지다.

Prototype Chaining이란, 자바스크립트 엔진이 어떤 프로퍼티나 메소드에 접근하려고 할 때 해당 객체에 찾는 프로퍼티나 메소드가 없다면, __proto__가 가리키는 링크를 따라 부모 객체의 프로퍼티나 메소드를 차례대로 올라가며 찾아보는 것을 의미한다.

체인의 종점은 Object.prototype이다

__proto__

객체를 생성하면 동시에 객체에는 [[prototype]] 이라는 것이 생성된다. 따라서 모든 객체는 내부 프로퍼티 [[prototype]]을 가지고 있다. 이것은 함수 객체의 프로토타입 프로퍼티와는 다른 객체로, [[prototype]]의 값은 객체의 __proto__프로퍼티에서 접근이 가능하다.

__proto__는 부모 함수의 프로토타입을 바라본다. 그리고 객체는 __proto__가 가리키는 부모 객체의 프로퍼티를 사용할 수 있다. 이 특징을 이용해 프로토타입 체이닝이 가능해진다.

prototype 프로퍼티

함수도 객체이므로 [[prototype]](__proto__) 인터널 슬롯을 갖는다. 그런데 함수 객체는 일반 객체와는 달리 prototype 프로퍼티도 소유하게된다.

즉 prototype 프로퍼티는 함수 객체만 가지고 있는 프로퍼티이다. 함수 객체가 생성자로 사용될 때 해당 함수를 통해 생성될 객체의 부모 역할을 하는 객체(프로토타입 객체)를 가리킨다.

constructor

프로토타입 객체는 constructor 프로퍼티를 상속받는다.

1function Bear(name) {
2  this.name = name;
3}
4let jokeBear = new Bear("농담곰");
5

6console.log(Bear.prototype.constructor);
7/* 
8    => ƒ Bear(name) {
9        this.name = name;
10    }
11*/
12

13console.log(Bear);
14/*
15    => Bear(name) {
16        this.name = name;  
17    }
18*/
19

20console.log(jokeBear.constructor);
21/*
22    => Bear(name) {
23        this.name = name;
24    }
25*/
26

27console.log(jokeBear.constructor === Bear);
28// => true

Bear.prototype의 constructor 프로퍼티는 Bear() 생성자 함수이다.

클래스

자바스크립트에서 클래스는 함수의 한 종류이다.

클래스의 기본 문법

1class Bear {
2  constructor(name) {
3    this.name = name;
4  }
5

6  sayHi() {
7    console.log(`안녕 나는 ${this.name}이야`);
8  }
9}
10

11let jokeBear = new Bear("농담곰");
12jokeBear.sayHi(); // => 안녕 나는 농담곰이야

클래스에서 class MyClass{}문법 구조가 하는 일은 다음과 같다.

  1. Bear라는 이름을 가진 함수를 만든다.
  2. 함수 본문은 생성자 메소드 constructor에서 가져온다. 없으면 본문이 비워진 채로 함수가 만들어진다.
  3. sayHi같은 클래스 내에서 정의한 메소드는 Bear.prototype에 저장한다.

클래스 상속

클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있다.

  • 클래스 확장 문법 class Child extends Parent
1// 상위 클래스 Animal
2class Animal {
3  constructor(name) {
4    this.name = name;
5  }
6  sayHi() {
7    console.log(this.name);
8  }
9}
10

11// Animal을 상속받는 클래스
12class Bear extends Animal {
13  constructor(name) {
14    super(name); // => this 올리기
15  }
16  cute() {
17    console.log(`${this.name}은 쏘 큐트`);
18  }
19}
20

21let jokeBear = new Bear("농담곰");
22

23jokeBear.sayHi(); // => 농담곰
24jokeBear.cute(); // => 농담곰은 쏘 큐트
  • extends키워드는 프로토타입을 기반으로 동작한다.
  • super 키워드드는 부모 오브젝트의 함수를 호출한다