[자바스크립트] 프로토타입

프로토타입

• 객체의 부모역할을 하는 객체
• 자식 객체에게 프로퍼티와 메서드를 상속

프로토타입 사용이유

• 생성자 함수로 인스턴스 생성할 때, 중복 프로퍼티, 메서드 생성해서 자원이 낭비됨
• 만약 10개의 인스턴스 생성하면 동일한 메서드가 10개 생성되는 셈
• 프로토타입을 활용해 상속하여 불필요한 중복 제거 가능

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

// 생성자 함수로 사용한 경우 >> 메서드 중복되어 자원낭비 function Circler(radius) {     this.area = radius;     this.getArea = function() {         return Math.PI * this.radius ** 2;     } }   // 인스턴스 2개 생성 const circle1 = new Circle(1); const circle2 = new Circle(2);   // 동일한 역할을 하는 메소드지만, 각각 인스턴스가 소유해서 자원이 낭비 console.log(circle1.getArea === circle2.getArea); // false     // prototype 사용할 경우 >> 상속통해 중복제거 가능 function Circle(radius) {     this.area = radius; } Circle.prototype.getArea = function() {     return Math.PI * this.radius ** 2; }   // 인스턴스 2개 생성 const circle1 = new Circle(1); const circle2 = new Circle(2);   // 하나의 메서드를 공유 console.log(circle1.getArea === circle2.getArea); // true

cs

프로토타입 체인

• 프로토타입이 한 방향으로 연결되어있는 상속구조
• 정확히 말하면 단방향 링크드 리스트
• 객체의 프로퍼티, 메서드에 접근할때 없으면, 프로토타입 체인 따라서 부모 프로퍼티 확인
• 프로토타입 체인의 최상위 객체 : Object.prototype
• 모든 객체는 Object.prototype의 프로퍼티와 메서드 사용 가능

프로토타입, 생성자 함수 관계

• 프로토타입
  • 객체의 __proto__로 접근 가능
    • __proto__ : 프로토타입에 접근하는 내부 접근자, __proto__ 참조
  • constructor 메서드를 가짐 : 생성자 함수
  • __proto__ 프로퍼티 : Object.prototype
• 생성자 함수
  • prototype 프로퍼티 : Prototype 객체
  • __proto__ 프로퍼티 : Function.prototype
  • 프로토타입 생성 시점 : 생성자 함수 생성될때 생성

오버라이딩, 프로퍼티 섀도잉

• 오버라이딩 : 프로토타입에 정의된 프로퍼티, 메서드를 객체에서 새롭게 추가
  • 객체에 추가된 프로퍼티 호출됨
  • 프로토타입 프로퍼티를 덮어쓰는것이 아닌, 객체에 새로운 프로퍼티가 추가
• 프로퍼티 섀도잉 : 객체에 새로운 프로퍼티, 메서드 추가할때, 프로토타입의 것이 가려지는 현상

출처

• 모던 자바스크립트 Deep Dive, Ch 19