본문 바로가기
Language/JavaScript

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

by 싯벨트 2022. 12. 25.
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을 상속받는다.

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

참고자료

'Language > JavaScript' 카테고리의 다른 글

실행컨텍스트 뿌시기. part1  (0) 2023.08.25
자바스크립트 일반  (0) 2023.06.24
[객체 기본] new 연산자와 생성자 함수  (0) 2022.12.24
[Class] 게터와 세터  (0) 2022.12.17
[Class] 클래스 정의와 원리  (0) 2022.12.16