프로토타입 prototype

Yun Young Choi·2022년 12월 11일
0

Javascript

목록 보기
2/7
post-thumbnail

이번 시험 기간에... 프로토타입 범위가 또 들어있네요...
아무튼 화이팅해봅시다...

프로토타입이란?

어떤 객체의 상위 객체 역할을 하는 객체, 하위 객체에게 자신의 프로퍼티와 메서드를 상속.
JS는 프로토타입을 기반으로 상속을 구현한다.

Prototype

  • 프로토타입 객체로 하위 객체에게 자신의 프로퍼티, 메서드 상속

[[Prototype]]

  • 프로토타입 객체를 가리키는 내부 슬롯 (숨겨진 객체)

proto

  • 프로토타입에 접근하기 위한 접근자 프로퍼티 [[Prototype]] 내부 슬롯에 간접 접근

let o = {};
// __proto__ 게터로 [[Prototype]] 객체 접근
console.log(o.__proto__);
// Object.getPrototypeOf() 메소드로도 객체 접근
console.log(Object.getPrototypeOf(o));
// true
console.log(o.__proto__ === Object.getPrototypeOf(o));

프로토타입 체인

객체의 프로퍼티나 메서드에 접근했을 때 발견하지 못하면 객체의 [[Prototype]] 객체에 접근 후 해당 속성, 메서드가 있는지 검색

프로토타입 체인을 검색하는 과정에서 가장 먼저 만나게 된 속성, 메서드에 접근


프로토타입 관련 메소드

메소드명의미사용법
.proto객체 지정 가능a.proto = 프로토타입으로 사용될 객체
Object.getPrototypeOf()[[Prototype]] 객체 접근 가능-
Object.setPrototypeOf(value, proto)프로토타입을 지정할 객체 지정 가능value = 프로토타입을 지정할 객체
proto = 프로토타입으로 사용될 객체

프로토타입 잘못된 접근

1. [[Prototype]] 에 없는 속성 = undefined 반환

2. [[Prototype]] 에 없는 메소드 = TypeError 발생


프로토타입 관련

  • 프로토타입 체인을 따라 검색
  • 모든 함수는 정의되자마자 prototype 속성을 가짐(화살표 함수는 가지지 않음)
  • 보통 프로토타입 객체와 연관된 작업을 수행할 함수는 함수선언식 사용
  • prototype 속성에 저장된 값 = 객체 = cunstructor 속성 가짐
  • constructor 속성에는 자기 자신을 가리키는 함수 저장
  • 대게 프로토타입 연관된 함수는 생성자 함수

function a() {};
let b = function() {};

console.log(a.prototype); // cunstructor : a
console.log(b.prototype); // cunstructor : a

  • new 키워드와 호출하면 this에 새 객체를 할당 하고 자동으로 this를 반환
  • 해당 객체를 생성할 때 this.proto에 자동으로 생성자 함수의 prototype을 대입한다.
  • 객체에 원하는 값이 없으면 prototype 에서 찾는다.

객체.proto === 클래스.prototype 는 완전히 일치하는 레퍼런스 변수

prototype 객체에 공통 메서드를 정의하더라도 메서드 내부의 this의 값은 해당 메서드를 호출하

는 객체(점(.) 앞의 객체)를 가리키므로 문제 없이 사용 가능

profile
안냥하세요

0개의 댓글

관련 채용 정보