코어 자바스크립트 | 챕터 6: 프로토타입

2025. 4. 26. 00:44·교재/코어 자바스크립트

프로토타입
prototype 객체 내부에는 인스턴스가 사용할 메서드를 저장합니다. 그러면 __proto__를 통해 이 메서드들에 접근할 수 있게 됩니다

=prototype이 만든 인스턴스를 __proto__를 이용해 참조할 수 있다(둘은 같은 객체를 바라본다)

Person.prototype === suzi.__proto__

단 suzi.__proto__.getName 은 undefined가 나오는데 이는 suzi.__proto__라는 객체가 getName의 this가 되었기 때문이다
식별자가 정의되어 있지 않을 때는 undefined를 반환한다는 규칙 때문에 undefined가 반환된다

__proto__는 생략 가는한 프로퍼티이다

" new 연산자로 constructor를 호출하면 instance가 만들어지는데 이 instance의 생략 가능한 __proto__는 constructor의 prototype을 참조한다! "

__proto__는 생략 가능하기 때문에 생성자 함수 prototype에 메서드나 프로퍼티가 있다면 인스턴스에서도 접근할 수 있게 된다



constructor 프로퍼티
생성자 함수의 프로퍼티인 prototype 객체 내부에는 constrctor라는 프로퍼티가 있다
이 프로퍼티는 원래의 생성자 함수(자기 자신)을 참조한다


<프로토타입 체인>
var Person = function (name) { 
    this.name = name;
};
Person.prototype.getName = function () {
    return this.name;
};

var iu = new Person('지금');
iu.getName = function() {
    return '바로' + this.name;
};
console.log(iu.getName());
프로토타입에 정의된 getName이 있어도,
객체 자체에 정의된 메서드가 더 우선해서 실행된다
-> 메서드 오버라이딩

console.log(iu.__proto__.getName()); 하면
undefined, prototype에 있는 메서드에 접근할 수 있다
다만 이러면 this가 prototype을 바라보고 있는데 이걸 인스턴스를 바라보도록 한다면
call이나 apply를 쓰면 된다

프로토타입 체인: __proto__ 프로퍼티 내부에 다시 __proto__ 프로퍼티가 연쇄적으로 이어진 것

프로토타입 체이닝: 이 체인을 따라가며 검색하는 것

프로토타입 체이닝은 메서드 오버라이드와 동일한 맥락이다
어떤 메서드를 검색해서 원하는 게 없으면 __proto__를 검색해서 실행하고 또 없으면 또 검색



객체 전용 메서드의 예외사항
prototype은 반드시 객체이기 때문에 Object.prototype이 언제나 프로토타입 체인의 최상단에 존재하게 된다
따라서 프로토타입 체이닝을 통해 접근할 수 있는 것들은 오류 없이 결과를 반환하게 되는 문제도 있다(물론 어떤 때는 문제가 아니기도 함)
-> toString 같은 것은 모든 변수가 마치 자신의 메서드인 것처럼 호출할 수 있다


~다중 프로토타입 체인~
대각선의 __proto__를 연결해나가기만 하면 무한대로 체인 관계를 이어나갈 수 있다
~그 방법은, 생성자 함수의 prototype이 연결하고자 하는 상위 생성자 함수의 인스턴스를 바라보게끔해주면 된다~


<정리>
1. 어떤 생성자 함수를 new 연산자와 함께 호출한다
2. Constructor에서 정의된 내용으로 새로운 인스턴스가 생성됨
3. __proto__라는 constructor의 prototype 프로퍼티를 참조하는 프로퍼티가 자동으로 부여된다
4. __proto__는 생략 가능하고, constructor.prototype의 메서드를 자신의 메서드인 것처럼 호출할 수 있다

- constructor.prototype에는 constructor라는 프로퍼티가 있는데 이는 생성자 함수 자신을 가리킨다. 자신의 생성자 함수가 뭔지를 찾을 때 쓴다

- __proto__안에 다시 __proto__를 찾아가는 과정을 프로토타입 체이닝이라한다
프로토타입 체이닝을 통해 프로토타입 메서드를 자신의 것처럼 호출할 수 있다

Object.prototype에는 범용적 메서드만이 존재하고, 객체 전용 메서드는 Object 생성자 함수에 스태틱하게 담겨있다

'교재 > 코어 자바스크립트' 카테고리의 다른 글

코어 자바스크립트 헷갈리는 부분 정리  (0) 2025.04.29
코어 자바스크립트 | 챕터 7: 클래스  (0) 2025.04.26
코어 자바스크립트 | 챕터 5: 클로저  (1) 2025.04.25
코어 자바스크립트 | 챕터 4: 콜백 함수  (0) 2025.04.24
코어 자바스크립트 | 챕터 3: this  (0) 2025.04.24
'교재/코어 자바스크립트' 카테고리의 다른 글
  • 코어 자바스크립트 헷갈리는 부분 정리
  • 코어 자바스크립트 | 챕터 7: 클래스
  • 코어 자바스크립트 | 챕터 5: 클로저
  • 코어 자바스크립트 | 챕터 4: 콜백 함수
피까츄
피까츄
프로그래밍 마스터가 될테야
  • 피까츄
    프로그래밍 마스터
    피까츄
  • 전체
    오늘
    어제
    • 분류 전체보기 (64) N
      • 컴퓨터가 이상해요 모음집 (3)
      • 프로그래밍 (0)
      • 회고 (0)
      • 1학년 (21)
        • 명품 HTML+CSS+JS (10)
        • 쉽게 배우는 C언어 Express (2)
        • R언어 (9)
      • 2학년 (3)
        • C언어로 쉽게 풀어쓴 자료구조 (1)
        • 프로그래밍 언어론 (2)
      • 개인공부 (24) N
        • 백준 (17)
        • 코드트리 JS (6) N
        • 코테 공부 (1) N
      • 교재 (9)
        • 이것이 C++이다 (0)
        • 이것이 JAVA다 (0)
        • 혼자 공부하는 컴퓨터구조 + 운영체제 (1)
        • 혼자 공부하는 데이터통신 (0)
        • 코어 자바스크립트 (8)
      • 유데미 (3)
        • 100일 코딩 챌린지 (3)
  • 블로그 메뉴

    • 방명록
    • 그림블로그
    • 3D 블로그
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    HTML5+CSS3+Javascript 웹 프로그래밍 #연습문제 #이론문제 #실습문제 #풀이 #정답
    가상현실 설정
    0x80370102오류코드
    우분투 설치 오류
    윈도우 기능 켜기
    복습
    우분투C
    우분투java
    the package javax.swing is not accessible
    작업표시줄클릭안됨
    js #자바스크립트_기초
    프로그래밍언어론
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
피까츄
코어 자바스크립트 | 챕터 6: 프로토타입
상단으로

티스토리툴바