3.15 [클래스 & 객체지향 프로그래밍 & 프로토타입]

Lee·2023년 3월 15일
0

오.배.이.안& 회고

목록 보기
21/46
post-thumbnail

[클래스]

  • 클래스란
    하나의 객체 프로토타입을 생성하여 해당 객체 프로토타입의 자식들이라고 할 수 있는 인스턴스 객체 들이 해당 클래스의 프로퍼티나 메소드를 사용할 수 있는 문법이다.
  • 인스턴스란
    하나의 클래스나 생성자 함수가 가지는 프로토타입, 메서드를 사용할 수 있는 새로운 객체를 말한다. === 클래스를 통해 만들어진 객체

예를 들자면

Array 배열f Array() 로 보아하니 하나의 생성자 함수라고 할 수 있겠다.(추측..)

Array라는 생성자 함수 내부에는 prototype이 존재하고 prototype 내부에는 수많은 프로퍼티들이있다. (값들이 함수로 담겨 있다)

배열이 가지는 프로토타입을 사용할 수 있는 인스턴스(새로운 객체)를 만드는 방법은

num 의 내부를 보면 Array.prototype 들이 나열되어 있는 걸로 보아하니 num은 Array를 부모로 가지는 새로운 인스턴스라고 할 수 있겠다.

new Array 를 통해서 인스턴스를 만드는 것도 당연히 가능하다.

클래스는 ES6 부터 도입된 객체 프로토타입 생성 방식으로 이전까지는
생성자 함수 방식으로 객체 프로토타입 생성을 구현 했다.

  • 생성자 함수 방식

  • 생성자 함수는 일반 함수 사용법과 비슷하다. 다만 내부에 프로퍼티를 만들어주기 위해 this 를 사용해 주고
  • 생성자함수 메서드를 정의하기 위해서는 prototype 키워드를 이용해야한다.
  • new 키워드를 이용해 인스턴스를 만들어 주는 것은 클래스와 동일하지만 new를 작성하지 않게 되면 그냥 일반함수로 동작한다.
  • 클래스 방식

  • 생성자 함수와 달리 class 키워드를 이용하여 작성한다
  • constructor 의 이름은 변경 불가능 하고 인스턴스가 생성될 때 가지고 있는 프로퍼티 정보를 작성한다.
    this 는 인스턴스 객체를 가르킨다.
  • new 키워드가 없으면 오류가 난다.

* prototype 생성 방식도 생성자 함수보다 간결하다.


[객체 지향 프로그래밍]

  • 객체 지향 언어 (Object-Oriented Programming)

객체 지향 언어의 정의는 아직 감이 안와서 찾아본 바로

  • 객체지향 프로그래밍은 속성과 메서드를 가지고 있는 객체를 말하며
    데이터를 기능과 묶어서 처리할 수 있고
    객체(Object)를 추상화(abstraction)를 통해 모델링하려는 프로그래밍 패러다임을 말한다.

이를 자바스크립트에선 Class 라고 부른다.
즉, Class === 객체 지향 프로그래밍 이다.

  • 객체 지향 프로그래밍의 핵심 개념
  1. Encapsulation 캡슐화
  2. Abstraction 추상화
  3. Inheritance 상속
  4. Polymorphism 다향성
  • Encapsulation 캡슐화

같은 기능을 하는 메소드,프로퍼티들을 하나의 클래스 에 담고 외부에 공개될 필요가 없는 정보는 숨기는 것. 은닉화라고 부르기도 한다.

외부에서의 접근을 제한적으로 허용하기 때문에 클래스 내에 담겨 있는 데이터나 기능들을 보호하는 작용을 한다.

코드가 복잡하지 않게 만들고, 재사용성을 높인다는 장점이 있다.

  • Abstraction 추상화

복잡한 내부 로직은 숨기고 외부에 노출되는 부분은 단순하게 만드는 것으로
많은 기능들이 노출되어 있지 않기 때문에 예상치 못한 오류나 변화가 일어나는 것을 방지할 수 있다.

캡슐화 와 비슷한 개념이나
캡슐화 - 데이터와 기능을 은닉하는 것에 초점이 맞춰져 있다면
추상화 - 클래스에 있는 복잡한 로직이나 메서드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것에 초점이 맞춰져 있다

캡슐화와 마찬가지로 코드를 단순하게 만들고 변화를 최소화 시킨다.

  • Inheritance 상속
    부모클래스의 프로퍼티와 메서드들을 자식 클래스에서 사용할 수 있도록 상속 기능이 구형되어 있다.

클래스가 코드의 재사용성을 장점으로 가지는 이유가 아닐까 싶다

  • Polymorphism 다향성
    객체의 속성이나 메서드가 상황에 따라 여러 가지 형태를 가질 수 있는 성질이라고 할 수 있고
    같은 이름의 메서드가 상황에 따라 다른 역할을 수행하는 것 이라고도 말할 수 있겠다.

복잡한 코드를 단순하게 만들어 추상화를 높이고 재사용성과 효율성을 증대하는 프로그래밍 방식이 객체 지향 프로그래밍 이 아닐까 생각해본다.


[프로토타입]

  • 프로토타입이란 부모 유전자 라고 생각하니까 이해가 된다!.
    어떤 객체의 특성을 다른 객체가 상속 할 수 있는 매커니즘?

자바스크립트에서 함수로 이루어진 객체가 생성되면 prototype 프로퍼티를 가지고 태어나고 또 그 객체의 prototype Object 도 생성 되는데
prototype 프로퍼티prototype Object 를 가르키게 되고 prototype Object 의 속성 중 constructor 은 해당 함수 객체를 가르키게 된다.
즉, prototype Object 가 프로토타입이라는 것이다.

  • Prototype 가 참조하는 객체 === 프로토 타입

<이미지 참조 : 생활코딩>

mdn 설명으로는

  • 프로토타입이란
    모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다.

즉, 하나의 객체가 찾고자 하는 프로퍼티가 없다면 해당 객체가 가지고 있는 [[Prototype]] 에서 프로퍼티를 찾게 된다. 이렇게 동작하는 걸 프로토타입 체인이라 한다.

그렇다고 합니다..! "자식은 부모의 객체에 있는 프로퍼티나 메서드를 사용할 수 있다"

Object.prototype

함수 객체만 가지고 있는 프로퍼티이고 생성자 함수의 prototype 객체를 가르킨다 일반 객체에 사용 시 undefined 반환한다.

console.dir(num.prototype)  함수 객체가 아니니 undefined 반환 console.dir(Array.prototype)는 함수 객체이니 Array의 prototype 프로퍼티를 보여 줌.

  • 객체들은 __Proto__ 를 통해서만 생성자 함수의Prototype 프로퍼티 에 접근할 수 있다.

    그 이유는 [[Prototype]] 내부 슬롯에는 직접 접근이 불가하다. 이는 프로토타입 체인의 단방향을 지키기 위해서다. 만약 직접 접근가능하다면, 서로가 서로의 프로토타입이 되면서 프로토타입 체인이 무한루프에 빠지게 되기 때문

상속의 경우에도 자식들은 __Proto__ 프로퍼티 를 통해야만 생성자 함수의Prototype 프로퍼티 에 접근할 수 있다.

이렇게 __Proto__ 를 통해서 자식에서 부모로 부모에서 상위 부모로 타고 올라가 프로퍼티나 메소드를 사용할 수 있는 것을 프로토타입 체인이라고 한다!

위의 사진에 나온 원시 자료형(숫자,문자열,불린 값 만 해당!)은 객체가 아니다. 객체가 아니지만 원시 자료형의 프로퍼티에 접근하려고 하면 임시 래퍼(wrapper) 객체가 생성된다. 그래서 String.prototype, Number.prototype, Boolean.prototype 을 사용할 수 있는 것이고 해당 프로퍼티를 제공하고 나면 사라진다.

아닐 수도 있음 ... 나의 뇌는 활동을 멈춘건가 ㅎㅎ🤯

  • Object.prototype함수 객체만 가지고 있는 프로퍼티이다.
    그래서 그냥 객체인 kimcoding.prototypeundefined 가 나온 것이다!

  • __Proto__모든 객체가 가지고 있다 그래서 kimcoding.__proto__ 를 이용해 생성자 함수(부모)의 prototype 객체를 참조 할 수 있는 것!

0개의 댓글