Language/JavaScript

[프로토타입] 프로토타입의 이해

싯벨트 2022. 12. 25. 17:29
728x90

당연하게 사용하고 있었던 객체, 배열, 문자열 등의 메서드들이 어떻게 동작하는지,

그리고 추후 클래스를 사용하며 extends, implement, 생성자 함수의 사용 등을 유려하게 하기 위해서 가장 먼저 짚고 넘어가야 할 개념이 프로토타입이다. 

 

#[[prototype]]

  • 객체가 갖는 내부 프로퍼티이자 숨김 프로퍼티로써, null 을 참조하거나 다른 객체를 참조할 때 사용된다.
  • 객체에서 하나만 존재한다. (참조할 수 있는 프로토타입은 유일함)
  • 참조할 프로토타입을 할당할 수 있다.(객체나 null 만 가능)
  • 객체에서 찾을 수 없는 메서드와 속성은 [[prototype]]으로 참조한 프로토타입에서 찾는다. 처음 찾은 메서드 혹은 속성을 반환한다. 
  • __proto__ 는 속도 이슈 및 에러 발생 가능성 때문에 사용이 지양되며, [[prototype]]의 접근자 프로퍼티(게터, 세터)이다.
  • for in 반복문을 사용할 경우, 상속프로퍼티도 순회한다. 

 

👉 new 연산자 알아보기

#함수의 프로토타입 속성

  • 리터럴이 아닌 new 연산자를 활용하여 객체 생성 가능 - 생성자 함수의 프로토타입 정보를 사용해서 [[prototype]] 설정
  • 생성자 함수의 프로토타입 속성을 할당(단순 속성값에 할당?)해주면, new연산자를 통해 만들어진 객체는 할당된 객체를 프로토타입으로 참조함([[prototype]] 프로퍼티를 통해 상속받음)
  • 따로 할당하지 않더라도 모든 함수는 기본적으로 {constructor: 함수자신} 처럼 constructor 속성 하나만 갖고 있는 객체인 prototype 프로퍼티를 가짐
    • new 연산자를 통해 생성된 객체도 default prototype(constructor만 갖는 객체)를 상속받음
  • 객체.constructor 로 할당을 하면 교체되므로, constructor를 보호하려면 프로토타입에 메서드로 넣어야 함.
    • 객체.prototype.constructor / 객체.prototype.method 요런식으로 추가

#내장객체의 프로토타입

기본 타입의 객체들은(배열, 함수, 숫자) 각 타입의 프로토타입을 상속받고, 

각 타입의 프로토타입은 객체 타입의 프로토타입을 상속받으며,

객체 타입의 프로퍼티는 null을 상속받는다.

다양한 객체들의 프로토타입

참고자료