23.01.13 - 클래스와 인스턴스, 객체 지향 프로그래밍, 프로토타입과 클래스

1. 클래스와 인스턴스

객체 지향 프로그래밍

: 하나의 모델이 되는 청사진을 만들고 그것을 바탕으로 한 객체를 만드는 프로그래밍 패턴

1) 용어 정리

(1) 클래스

클래스(class)는 객체 지향 프로그래밍에서 말하는 청사진이라고 할 수 있다.

즉, 클래스는 객체를 생성하기 위한 템플릿이다.

클래스는 일반적인 함수와 구분하기 위해 보통 대문자로 시작하고, 일반명사 형태로 만든다.

return 값을 만들지 않는다.

 

(2) 인스턴스

인스턴스 객체(instance object)는 클래스를 바탕으로 한 객체이다. 줄여서 인스턴스(isntance)라고 한다.

예를 들자면, 클래스는 자동차의 거푸집과 같은 것이라고 할 수 있다. 그렇다면 인스턴스는 클래스라는 틀에서 나온 자동차일것이다. 거푸집에 네개의 문과 네개의 바퀴, 두개의 백미러가 있다면, 그 거푸집을 이용해서 나온 물체에도 똑같이 네개의 문, 네개의 바퀴, 두개의 백미러가 있을것이다.

이처럼 클래스를 통해 생성된 인스턴스는 클래스의 고유한 속성과 메서드들을 갖게 된다.

 

(3) 생성자(constructor) 함수

// ES5
function Car(brand, name, color) {
    // 인스턴스가 만들어질때 실행되는 코드
}

// ES6
class Car {
    constructor(brand, name, color) {
        // 인스턴스가 만들어질때 실행되는 코드
    }
}

생성자(constructor) 함수는 인스턴스가 만들어질때 실행되는 코드이다.

return 값을 만들지 않는다.

최근에는 ES6 문법이 주로 사용된다.

 

(4) new 키워드

클래스를 사용하여 새로운 인스턴스를 생성할때 사용한다.

사용 즉시 생성자 함수가 실행되고, 변수에 클래스의 틀을 가진 새로운 객체(인스턴스)가 할당된다.

각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖게 된다.

let avante = new Car('hyundai', 'avante', 'black');
let mini = new Car('bmw', 'mini', 'white');
let beetles = new Car('volkswagen', 'beetles', 'red');

 

💡 속성(property)과 메서드(method)

속성(property)은 이름(key)와 값(value) 사이의 연결관계이다.
속성의 값이 함수인 경우, 이것을 메서드(method)라고 한다.

const obj = {
    key: value, // 속성
    method: function(){ // 함수를 가진 속성 = 메서드
        console.log('메서드')
    }
}

 

2) 클래스와 인스턴스 만들기

각각 ES5, ES6 문법을 사용해 클래스와 인스턴스를 만들고 결과를 확인해보기로 했다.

 

✅ 전체 코드

function Car(brand, name, color) {
    // 생성자. 리턴값 없음
    // 인스턴스 만들때 실행되는 코드
    this.brand = brand
    this.name = name
    this.color = color

    Car.prototype.refuel = function () {
      console.log(this.name + '은 주유중')
    }

    Car.prototype.drive = function () {
      console.log(this.name + '은 운전중')
    }
}

class Car {
    // 생성자. 리턴값 없음.
    constructor(brand, name, color) {
      // 인스턴스 만들어질때 실행되는 코드
      this.brand = brand
      this.name = name
      this.color = color
    }
    refuel() {
      console.log(this.name + '은 주유중')
    }
    drive() {
      console.log(this.name + '은 운전중')
    }
}

let avante = new Car('hyundai', 'avante', 'black')
let mini = new Car('bmw', 'mini', 'white')
let beetles = new Car('volkswagen', 'beetles', 'red')

 

this

함수가 실행될 때 해당 스코프(scope)마다 생성되는 고유한 실행 컨텍스트(execution context).

new 키워드로 인스턴스를 생성했을때는 해당 인스턴스가 this가 됨으로, 여기서의 this는 인스턴스 객체를 의미한다.

매개변수(parameter)로 넘어온 brand, name, color는 인스턴스 생성시 지정되며, this.brand = brand 처럼 할당한다는 것은 해당 인스턴스에 매개변수로 넘어온 값을 부여하겠다는 뜻이다.

// 변수 avante의 경우 인스턴스가 생성될때 아래처럼 값이 할당될것이다

constructor('hyundai', 'avante', 'black') {
  avante.brand = 'hyundai'
  avante.name = 'avante'
  avante.color = 'black'
}

 

클래스에서 메서드 정의하기

ES5는 prototype이라는 키워드를 사용해야한다.

ES6의 경우 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의한다.

function Car(brand, name, color) {
    //...
    Car.prototype.refuel = function () {
      console.log(this.name + '은 주유중')
    }

    Car.prototype.drive = function () {
      console.log(this.name + '은 운전중')
    }
}

class Car {
    // ...
    refuel() {
      console.log(this.name + '은 주유중')
    }
    drive() {
      console.log(this.name + '은 운전중')
    }
}

 

인스턴스에서 메서드 사용하기

let avante = new Car('hyundai', 'avante', 'black')
let mini = new Car('bmw', 'mini', 'white')

avante.brand; // 'hyundai'
avante.refuel(); // avante은 주유중

mini.color; // 'white'
mini.drive(); // mini은 운전중

 

➕ 추가 용어 정리

prototype

: 모델의 청사진을 만들때 쓰는 원형 객체(original form)

constructor

: 인스턴스가 초기화 될때 실행하는 생성자 함수

 

2. 객체 지향 프로그래밍(Object Oriented Programming)

1) 절차 지향 프로그래밍과 객체 지향 프로그래밍

절차 지향 프로그래밍	객체 지향 프로그래밍
- 순차적인 명령의 조합
- 초기의 프로그래밍 언어(C, 포트란 등)	- “클래스” 라고 부르는 데이터 모델의 청사진을 사용해 코드 작성
- 현대의 언어들은 대부분 객체 지향의 특징을 갖고있다

 

자바스크립트는 객체 지향 언어는 아니지만, 객체 지향 패턴으로 작성 할 수 있다.

 

2) OOP

OOP, 즉 객체지향 프로그래밍은 프로그램 설계 철학 중 하나이다.

 

(1) OOP의 특징

• 모든 것을 객체로 그룹화한다.
  객체 내에는 “데이터와 기능이 함께 있어야한다”는 원칙에 따라 메서드와 속성이 존재한다.
  이 객체는 메모리 상에서 반환되기 전까지 객체 내의 모든 것을 유지한다.
• 클래스
  속성(세부사항)이 들어가지 않은 원형(original form).
• 인스턴스
  클래스를 통해 만들어진 객체.
• 생성자
  인스턴스에 생성자를 통해 속성을 넣어줄 수 있다.

 

(2) OOP의 주요 개념

1️⃣ 캡슐화

• 데이터와 기능을 하나의 단위로 묶음
• 은닉(hiding) : 구현을 숨기고 동작은 노출하고
• 느슨한 결합(Loose Coupling)에 유리함 ⇒ 언제든지 구현 내용 수정 가능
• 코드가 복잡하지 않게 만들고 재사용성을 높임

 

💡 용어정리

느슨한 결합

코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아니라, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는 것.

은닉화

내부 데이터나 내부 구현이 외부로 노출되지 않게 만드는 것.

 

2️⃣ 추상화

• 내부 구현은 복잡하더라도 실제 노출되는 부분은 단순하게 만드는 것.
• 예기치 않은 사용상의 변화가 일어나지 않게 만들 수 있다
• 코드가 복잡하지 않고, 사용이 단순화되어 변화에 대한 영향을 최소화한다

 

💡 용어정리

인터페이스(interface)

클래스 정의 시, 메서드와 속성만 정의한 것.

 

🤔 캡슐화와 추상화의 차이?

캡슐화 : 코드나 데이터를 은닉하는데에 중점

추상화 : 필요하지 않은 부분을 숨겨서 단순하게 정의하는 것에 중점

 

3️⃣ 상속

• 기본 클래스(base class)의 특징을 파생 클래스(derived class)가 상속받는것
  (부모 클래스의 특징을 자식 클래스가 물려받음)
• 불필요한 코드를 줄여 재사용성을 높인다

 

4️⃣ 다형성

• 똑같은 메서드라도 다른 방식으로 구현될수 있으며, 이를 통해 다양한 형태를 가지는 것
• 동일한 메서드에 대해 객체의 특성에 맞게 다르게 작성하는것이 가능하다

 

3. 프로토타입과 클래스

자바스크립트는 프로토타입 기반 언어이다.

여기서 프로토타입(Prototype)은 원형 객체를 의미한다.

 

1) 프로토타입 체인(prototype chain)

모든 객체들은 메소드와 속성들을 상속받기 위한 템플릿으로서 프로토타입 객체를 가진다.

객체 생성자의 prototype 속성에 정의된 속성과 메서드들이 하위 객체 생성자의 prototype으로 상속되는것.

다른 객체에 정의된 메서드와 속성을 한 객체에서 사용할 수 있게 해준다.

 

2) 프로토타입 객체

// 생성한 클래스
function Person(first, last, age, gender, interests) {

  // 속성과 메소드 정의
  this.name = {
        first: first,
        last: last,
    }
  this.age = age
  this.gender = gender
  this.interests = interests
    //...
}

// 클래스 Person으로 생성한 인스턴스 person1
var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);

 

콘솔로 확인할때 person1의 프로토타입 객체인 Person()에 정의된 속성과 메서드들이 있음을 확인할 수 있다.

그런데 Person()에 정의되어 있지 않은 valueOf, toLocaleString… 등은 왜 있는 걸까?

이 메서드들은 Person()의 프로토타입 객체인 Object에 정의된 메서드들이다.

따라서 프로토타입 체인이 동작함을 알 수 있다.

 

브라우저의 콘솔에서 __proto__ 속성을 통해 특정 객체의 프로토타입 객체에 접근할 수 있다.

⇒ .__proto__는 더이상 권장되지 않으므로, Object.getPrototypeOf()를 사용하는 것을 권장한다.

 

 

콘솔을 통해 확인해보면 person1의 프로토타입 객체는 Person() 생성자의 프로토타입이고, Person() 생성자의 프로토타입 객체의 프로토타입 객체는 Object() 생성자의 프로토타입임을 알수있다.

 

3) 프로토타입 속성

: 상속받은 속성과 메소드들이 정의되어 있는곳.

Object의 경우, Object.으로 시작하는 속성들이 아닌 Object.prototype.으로 시작하는 속성들만이 상속된다.

.prototype을 사용해 프로토타입 속성을 확인할 수 있다.

 

4) 생성자 속성

모든 생성자 함수는 constructor 속성을 지닌 객체를 프로토타입 객체로 갖고 있다.

constructor 속성은 원본 생성자 함수 자신을 가리킨다.

Person()으로 생성된 모든 인스턴스는 프로토타입 체이닝에 의해 constructor에 접근할수있다.

person1.constructor // 생성자 함수 Person()을 반환한다 

 

5) 클래스, 인스턴스, 프로토타입의 관계

 

 

 

 

 

 

 

******************

 

오늘 공부 총평 : 어렵다...!!! 

진짜 여태껏 내가 했던 공부는 다 순한맛이었구나... 애기 이유식이었구나 그런 생각이 든다 

그래도 손으로 노트에 필기해가면서 정리해보니 아예 이해가 안된다! 하는 정도는 아니어서, 조금 더 시간을 들여서 깊이 이해해 볼 필요가 있음을 느꼈다. 

내일은 주말이니까 오늘 공부한 내용을 다시한번 정리해보면서 추가적으로 이해하거나, 내가 잘못 이해한 부분이 있다면 수정해보려고 한다.