LHJ

I'm a FE developer.

10-4. Object 오브젝트(ES3 기준) / 빌트인 오브젝트 구조, prototype

26 Nov 2020 » js_beginner

10-4. Object 오브젝트(ES3 기준) / 빌트인 오브젝트 구조, prototype

빌트인 오브젝트 구조를 정리하는 차원에서 접근하도록 하겠습니다.
이 내용의 키워드는 구조입니다.

빌트인 오브젝트 구조

  • 오브젝트 이름(Object, String, Number…)

우선 오브젝트 이름이 필요합니다.
Object, String, Number.. 등이 있습니다.

  • 오브젝트.prototype

    • 인스턴스 생성 가능 여부 기준

      prototype이 있으면 인스턴스를 생성할 수 있고,
      prototype이 없으면 인스턴스를 생성할 수 없습니다.

      예를 들면 String, Number 오브젝트는 prototype이 있습니다.
      하지만 수학 계산용 오브젝트인 Math 오브젝트에는 prototype이 없습니다.
      따라서 Math 오브젝트는 인스턴스를 만들 수가 없습니다.

    • 프로퍼티를 연결하는 오브젝트

      또한 prototype은 프로퍼티를 연결하는 오브젝트입니다.


prototype에 아래처럼 .을 찍고 프로퍼티를 연결합니다.
이것이 prototype의 기능입니다.

prototype이 있으면 인스턴스를 생성할 수 있고 프로퍼티를 연결할 수 있습니다.
prototype이 없으면 인스턴스도 생성할 수 없고 프로퍼티도 연결할 수 없습니다.

너무 심플하죠?

  • 오브젝트.prototype.constructor

    • 오브젝트의 생성자

new 연산자로 호출할 때 오브잭트의 생성자 함수인 constructor가 호출됩니다.
호출될 때 오브젝트.prototype.constructor가 호출되는 것입니다.
즉, constructor가 실질적으로 인스턴스를 새성하는 것입니다.

즉, prototype이 없으면 constructor는 존재하지 않죠?
따라서 인스턴스를 생성할 수 없게 되는 겁니다.
그런데 prototype이 있으면 constructordefault로 따라 붙습니다.

즉, 이러한 특성 때문에 prototype 존재여부로 인스턴스 생성가능 여부를 알 수 있는 것입니다.


  • 오브젝트.prototype.method

    • 메소드 이름과 함수 작성

그리고 위와같이 작성할 수 있습니다.
method 자리에 다수의 method를 작성할 수 있습니다.
그런데요, 제가 여기서 지금 메소드라고 했습니다.
지금까지는 메소드란 말 한번도 안쓰고, 함수라는 말을 썼습니다.
함수와 메서드의 차이에 대해서는 다음절에서 다루도록 하겠습니다.


  • 오브젝트 구조
  1. 개발자 도구 열기(Ctrl + Shift + i)
  2. 브라우저 새로고침 실행 (F5)
  3. debugger 위치에서 실행 멈춤
  4. debugger 종료 (F8)


빌트인 오브젝트를 다시한번 정리해보면, 우선 오브젝트 이름이 있어야됩니다.
그리고 오브젝트.prototype이 있어야됩니다.
물론 없을 수도 있습니다.
있으면 인스턴스를 만들 수 있다는 뜻입니다.
없으면 인스턴스를 만들 수 없는 것입니다.

그리고 prototype에다가 프로퍼티를 연결합니다.

  • 오브젝트.prototype.constructor
  • 오브젝트.prototype.method

위 처럼 말입니다.
자바스크립트에서 prototype은 굉장히 중요한 의미를 같지만, 실제 기능적으로 보면 별거 없습니다.
그저 인스턴스를 만드는 기준 역할과 프로퍼티를 연결하는 역할을 할 뿐입니다.

그런데 자바스크립트 개발자 사이에선 prototype은 굉장히 큰 의미가 있다고 회자됩니다.
(하지만 안에 내용을 보면 별거 없다는 겁니다.)

new Number()를 통해 자바스크립트 엔진은 생성자 함수인 constructor를 호출한다.
prototype에 연결되어 있는 함수를 메소드라고 한다.
이것은 다음 절에서 다루겠습니다.