prototype

JavaScript 사전지식

• 기본 자료형 몇 가지를 제외하면 모든 것(심지어 함수까지)이 객체/Object임
  • 해당되는 것은 숫자, 문자열, 진리값, null, undefined
  • 그러면 NaN은 객체인가?
• 다른 객체지향 언어에 있는 class가 없었지만 대신 prototype이라는 것이 있음
  • 후에 class가 추가가 되긴 했지만 JavaScript의 지향점과는 차이가 있음
• new 연산자는 새로운 객체를 만듦
  • 단, constructor 속성이 필요하나 아래에서 다시 언급될 예정

prototype이란

• 함수를 정의하면 그 안에 생기는 속성이자, 그 속성이 가리키는 객체
• 함수 객체의 속성으로서의 prototype: 해당 함수로 객체를 생성하면 어떤 객체를 '상속'할지를 나타냄
• 객체로서의 prototype:
  • constructor 속성: 이 객체의 생성자, 즉 방금 정의한 함수를 가리킴
  • __proto__ 속성: 이 prototype이 상속하는 상위 prototype을 가리킴
    • 말하자면 부모 클래스
    • 사실 모든 객체가 가지고 있는 속성으로, 최상위는 Object
    • prototype 속성은 함수에만 생긴다는 것과 대조적
• 여기에 멤버를 구현하면, 같은 prototype을 갖는 객체들이 해당 멤버를 공유
  • 그래서 모든 객체는 (결국 Object를 prototype으로 갖기 때문에) .toString() 같은 메소드를 사용할 수 있음

코드로 알아보기

function Example() {}
// Example.prototype은 Example이라는 프로토타입 객체를 가리킴
// 해당 객체에는 constructor: Example() 속성과 __proto__: Object 속성이 있음

let exA = new Example();
// exA.__proto__는 Example 프로토타입 객체를 가리킨


Example.prototype.funcA = function() { return 'A'; }
exA.funcA(); // 'A'가 리턴됨

exA.funcB = function() { return 'B'; }
let exB = new Example();
exB.funcB(); // funcB는 prototype에 정의된 함수가 아니므로 exB는 접근할 수 없

상속

function FurtherExample() {}
FutherExample.prototype = new Example();
// prototype 속성은 prototype 객체를 가리킨다는 점과
// new 연산자는 새로운 객체를 만든다는 점을 상기하자

let exC = new FurtherExample();
exC.funcA(); // 'A'가 리턴됨


function AnotherExample() {}
AnotherExample.prototype = Example.prototype;
// new 연산자를 쓰지 않고 이런식으로 연결해버리면
// Example에 메소드를 추가해도
Example.prototype.funcC = function() { return 'C'; }
let exD = new AnotherExample();
exD.funcC(); // AnotherExample의 인스턴스에서도 'C'가 리턴됨

요약

• 함수를 정의하면 prototype 속성과 객체가 생김
  • 따라서 모든 사용자정의 함수는 생성자임
• prototype 객체의 속성을 바꾸면 해당 prototype 객체를 __proto__ 속성에서 가리키는 모든 객체들이 영향을 받음
  • __proto__는 연쇄 가능
• prototype 속성에서 가리키는 prototype 객체를 바꾸면 상속관계가 바뀜

참고한곳

• JavaScript : 프로토타입(prototype) 이해 @ Nextree
• prototype @ 생활코딩/JavaScript
• [Javascript ] 프로토타입 이해하기 @ medium/@bluesh55