JS OOP, Prototype

개발자 지망생의 개념을 이해하고자 작성하는 정리노트입니다. 포스팅 정보중 잘못된 정보가 있으면 댓글 부탁드립니다.

👊 JS (prototype-based language)

모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미이다.

👊 OOP?

객체 지향 프로그래밍(OOP, Object-oriented programming)은 데이터+ 기능 묶어서 처리한다.

• 캡슐화 - Property + Method, 느슨한 결합 (실제 모습과 닮게 코드 결합), 은닉화(내부 데이터, 구현 외부 노출 x)
• 상속 - base class → derive class
• 추상화 - 실제 노출부분은 단순하게 만드는 개념 (인터페이스 단순 ) 사용자 포커스
• 다형성 - 같은 이름을 가진 메서드라도 인스턴스에 따라 다른 방식으로 구현 될 수 있다.
  → 유지보수 Up, 재사용성 Up
  → 객체지향 "실체"지향 - 현실세계 유사성 이해하기 쉬운코드

👊 JS OOP

자바스크립트는 객체지향 언어 x 프로토타입 언어 but 객체지향 패턴 작성 가능하다.
속성 + 메소드 ⇒ 하나의 "객체"라는 개념에 포함하며 클래스(Class)라는 이름으로 불린다.

👊 어떻게 만들까?

• 하나의 틀 class을 가지고 여러 instance를 만든다.
  붕어빵 만드는 틀이라고 생각하니까 이해하기 조금 쉬웠다.
  붕어빵을 만드는데 팥, 슈크림, 피자 붕어빵 등 하나의 붕어빵을 만드는 틀로 여러 instance 붕어빵을 만들 수 있다.
• constructor 객체 생성, 초기화, class 생성시 인스턴스가 만들어질 때 실행되는 코드이다.
• instance? 클래스의 현재 생성된 오브젝트를 가리키며 클래스의 고유한 속성과 메소드를 갖는다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  speak() {
    console.log(`${this.name}: Hello!`);
  }
}

Person.prototype
//{constructor: ƒ, speak: ƒ}
//constructor: class Person
//speak: ƒ speak()
//__proto__: Object

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

hyo0
Person {name: "hyo0", age: "20"}
age: "20"
name: "hyo0"
__proto__:
	constructor: class Person
	speak: ƒ speak()
	__proto__: Object

__proto__? Person.prototype 참조하기 위하 하나의 주소값
인스턴스를 만들기 위해 필요한 모든 것을 가지고 있다. 
메소드 바로 전달 해주고 싶지만 자바스크립트는 안된다.
__proto__ 통해서  Person.prototype에 있는 메소드를 꺼내쓰자

hyo0에는 speak라는 함수가 없지만 __proto__ 통해 참조할수 있는 spaek를 찾는데 chain을 따라 가다보니
클래스를 생성하면서 만들어진 prototype 객체에 담겨 있네?
꺼내서 쓰자!

클래스 생성시 prototype객체가 생성디 되며 class의 속성과 method의 정보가 담긴다.
instance 생성시 instance에 speek method가 없지만 호출이 되는것을 볼 수 있다.
instance 객체 proto를 열어보자!