[JavaScript] 객체 지향 프로그래밍(OOP) - 1

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

• 청사진(blueprint) 기반 객체(object)를 만드는 프로그래밍 기법
• JS에서는 청사진을 클래스(class)로 부름
• 청사진 바탕의 객체는 인스턴스(instance object)로 부름
• 클래스는 객체를 만들기 위한 생성자(constructor)함수를 포함

2. 기존언어와의 비교

• 절차적 언어 : 객체지향 개념 X, 순차적 명령의 조합(C언어 등)
• 객체 지향 언어 : 클래스 이용 청사진 통해 코드 작성(현대 언어)

3. OOP의 특징

1. 캡슐화(Encapsulation)
   • 데이터와 기능을 한 단위 묶는 것
   • 은닉: 구현은 숨기고 동작은 노출 시킴
   • 느슨한 결합에 유리: 언제든 구현 수정 가능
   • 느슨한 결합 : 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합
     (<->절차적 코드 작성)
2. 추상화(Abstraction)
   • 내부 구현은 복잡하지만 노출되는 부분은 간단히 작성
   • 인터페이스가 단순해지고 노출에 따른 변수 최소화

   캡슐화	추상화
   코드나 데이터 은닉에 포커스	사람이 필요X -> 메소드 노출X
   	단순한 이름으로 정의

   참고자료 - 코드로 본 캡슐화, 추상화 비교

3. 상속(Inheritance)
   • 부모 클래스의 특징을 자식 클래스가 물려 받는 것
   • 예를들면 학생클래스는 사람클래스 기반으로 특징 추가
4. 다형성(Polymorphism)
   • 같은 이름을 가진 메서드라도 조금씩 다르게 동작

   종류	특징	장점
   캡슐화	은닉	코드복잡도↓ 재사용성↑
   추상화	단순화	코드복잡도↓ 변화에 대한 영향 최소화↑
   상속	특징전달	재사용성↑
   다형성	상황별 할용	동일한 메서드를 객체 특성에 맞게 작성

“OOP는 사람이 세계를 보고 이해하는 방법을 흉내낸 방법론”

3. 생성자 함수 new

• 생성자 함수(constructor function)를 이용해 객체를 생성
• constructor는 객체를 만들고, 초기 상태를 셋팅

function Person(name, first, second){
   this.name=kim;
   this.first=first;
   this.second=second;
   this.sum = function(){
      return this.first + this.second
   }
}

let kim = new Person('kim', 10, 20) 
let lee = new Person('kim', 10, 30)
// 함수 앞에 new를 붙이면 생성자 함수로 작동

console.log(kim.sum())  // 30
console.log(lee.sum())  // 40

• 객체를 개별로 만들 시 아래와 같이 작성 필요

let kim = {
   name:'kim',
   first:10,
   second:20;
   this.sum = function(){
      return this.first + this.second
   }
}

let lee = {
   name:'lee',
   first:10,
   second:30;
   this.sum = function(){
      return this.first + this.second
   }
}

3. 프로토타입

• 프로토타입은 원형객체이다
• JS는 프로토타입 기반 상속구현으로 중복제거

1. 프로토타입 기본 예시

function Person(name, first, second){
   this.name=kim;
   this.first=first;
   this.second=second;
}

Person.prototype.sum = function() {
   return this.first + this.second
}
// 위에 있는 new 예시에서 객체 내에 있던
// sum 메서드를 프로토타입을 이용해 별도로 작성
// 객체 생성 시마다 함수 호출이 없어 메모리 절약 가능
// Person 생성자 함수 이용한 모든 객체에 일괄 적용 가능

let kim = new Person('kim', 10, 20) 
kim.sum = function(){
   return this.first + this.second
}
let lee = new Person('kim', 10, 30)

console.log(kim.sum())  // 30
// kim은 별도로 sum 메서드 할당해 주었음
console.log(lee.sum())  // 40
// lee는 sum 메서드가 없으므로 일단 자기자신에서 찾음
// 없을 경우 프로토 타입에 sum 메서드가 있는지 검색

1. 프로토타입 객체와 접근자 프로퍼티

class Human {
   constructor(name, age) {
      this.name=name;
      this.age=age;
   }
   sleep(){ return `${this.name}이(가) 잠을 잡니다.`}
}
const steve = new Human('steve', 20);
// instantiation - 인스턴스 만들기
steve.__proto__ === Human.prototype;
//  객체는 접근자 프로퍼티(__proto__)를 통해
// 자신의 [[prototype]] 내부 슬롯이 가리키는 프로토타입에 간접 접근 가능
//  __proto__ : double underscore proto (dunder proto)

JavaScript 카테고리 내 다른 글 보러가기