[JavaScript] 객체 지향

클래스, 인스턴스, 객체

---

클래스(Class)

• 객체를 만들어 내기 위한 설계도(틀)
• ES5 에서 클래스는 함수로 정의

function Person(name, age, nationality) {
	// 인스턴스가 만들어질 때 실행되는 코드
    // 속성
    this.name = name;
    this.age = age;
    this.nationality = nationality;
    
    // 클래스
    Person.prototype.learn = function() {
    
    }
}

• ES6 에서 클래스는 class 라는 키워드를 이용해서 정의

class Person {
	constructor(name, age, nationality) {
    	// 인스턴스가 만들어질 때 실행되는 코드
        // 속성
        this.name = name;
        this.age = age;
        this.nationality = nationality;
    }
    
    // 클래스
    learn() {
    }
}

• 위의 함수는 생성자 함수라고 하며, 인스턴스가 만들어질 때 실행됨
• 생성자 함수는 return 값을 만들지 않음

객체 (Object)

• 소프트웨어 세계에 구현할 대상
• 클래스에 선언된 모양 그대로 생성된 실체
• 특징
  • '클래스의 인스턴스'라고도 부름
  • 객체는 모든 인스턴스를 대표하는 포괄적인 의미를 가짐

인스턴스(Instance)

• 설계도를 바탕으로 소프트웨어 세계에 구현된 구체적인 실체
  • 객체를 소프트웨어에 실체화한 것 -> 실체화된 인스턴스는 메모리에 할당됨
• 특징
  • 인스턴스는 객체에 포함된다고 볼 수 있다.
  • 객체 지향 프로그래밍의 관점에서 객체가 메모리에 할당되어 실제 사용될 때 인스턴스라고 부름
  • 어떤 원본(추상적인 개념)으로부터 생성된 복제본을 의미

출처: https://devmoomin.tistory.com/72

• 인스턴스를 만들 때는 new라는 키워드를 사용
• 인스턴스가 초기화될 때 생성자 함수가 즉시 실행되고, 변수에 클래스의 설계를 가진 새로운 객체인 인스턴스가 할당됨
• 각각의 인스턴스는 클래스에서 정의된 고유한 속성과 메서드를 가짐

let sam = new Person('Sam', '23', 'Republic of Korea');
let emily = new Person('Emily', '27', 'France');

 

객체 지향 프로그래밍 (OOP)

---

객체 지향 프로그래밍이란?

• 클래스를 만들고, 클래스를 바탕으로 한 객체(인스턴스)를 만드는 프로그래밍 패턴
  • 필요한 데이터를 추상화시켜 속성(상태)와 메서드(행위)를 가진 객체를 만들고 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법
• 자바스크립트는 객체 지향 언어는 아니지만 객체 지향으로 작성 가능
• 클래스는 객체를 만들기 위해 생성자(constructor) 함수를 포함 -> 생성자를 통해 속성을 넣으면 객체가 됨
• 절차 지향에 비해 재활용성이 높고, 코드 이해와 디버깅이 쉬운 편

OOP의 4가지 특징

1. 캡슐화 (Encapsulation)

데이터와 코드의 형태를 외부로부터 알 수 없게 하고, 데이터(속성)의 구조와 역할, 기능(메서드)을 하나의 캡슐 형태로 만드는 방법(정보 은닉)

• 캡슐화 방법
  • 접근 제어자 private 사용 -> js에서 잘 사용되지 않음
  • getter/setter를 활용한 메서드

let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  },

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

// 주어진 값을 사용해 set fullName이 실행됩니다.
user.fullName = "Alice Cooper";

alert(user.name); // Alice
alert(user.surname); // Cooper

 

 

2. 추상화 (Abstraction)

클래스들의 공통적인 특성(속성, 메서드)들을 묶어서 표현하는 것

속성과 메서드의 이름만 노출시켜서 사용의 단순화

내부의 구현은 복잡하지만 실제로 노출되는 부분은 단순함

• 인터페이스
  • 클래스 정의 시 속성과 메서드만 정의한 것
  • 클래스에서 구현부가 빠졌다고 이해하면 편함
  • 실질적인 구현은 구현한다고 선언하는 클래스에서 이루어짐

// TypeScript
interface Shape {
  getArea(): number;
}

class Rect implements Shape {
  width : number;
  height: number;
  constructor(width, height) {
    this.width  = width;
    this.height = height;
  }
} // error: Class 'Rect' incorrectly implements interface 'Shape'. Property 'getArea' is missing in type 'Rect'.

 

 

3. 상속 (Inheritance)

부모 클래스에 정의된 속성 및 메서드를 자식 클래스에서 상속받아 사용하는 것

extends, super라는 키워드 사용 

 

 

4. 다형화 (Polymorphism)

똑같은 메서드여도 객체마다 다른 방식으로 구현될 수 있음

메시지에 의해 객체가 연산을 수행하게 될 때, 하나의 메시지에 대해 각 객체가 가지고 있는 고유한 방법으로 응답할 수 있는 능력

• 오버로딩 : 하나의 클래스 안에서 같은 이름의 메서드를 여러개 정의하는 것
• 오버라이딩 : 부모 클래스로부터 상속받은 메서드 내용을 변경하여 사용하는 것

 

 

참고 :

 

https://gmlwjd9405.github.io/2018/09/17/class-object-instance.html

https://xangmin.tistory.com/152

https://ko.javascript.info/property-accessors

https://hyunseob.github.io/2016/10/17/typescript-interface/