프로토타입(Prototype)

pssw0728·2022년 1월 13일
0

프로토타입 객체

자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어이기 때문에 클래스 없이도 객체를 생성할 수 있다.

자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있어서 부모객체의 메소드를 상속받아 사용 할 수 있게 하는데 이러한 부모객체를 프로토타입 객체라고 한다.

[[Prototype]] vs prototype 프로퍼티

[[Prototype]]은 함수를 포함한 모든 객체가 가지고 있는 인터넛 슬롯인데 반해
prototype프로퍼티는 함수 객체만 가지고 있는 프로퍼티이다.

constructor 프로퍼티

constructor 프로퍼티는 자신을 생성한 객체를 가리킨다.

function Person(name) {
  this.name = name;
}

var foo = new Person('Lee');

// Person() 생성자 함수에 의해 생성된 객체를 생성한 객체는 Person() 생성자 함수이다.
console.log(Person.prototype.constructor === Person);

// foo 객체를 생성한 객체는 Person() 생성자 함수이다.
console.log(foo.constructor === Person);

// Person() 생성자 함수를 생성한 객체는 Function() 생성자 함수이다.
console.log(Person.constructor === Function);

Prototype chain

특정 객체의 프로퍼티나 메소드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티 또는 메소드가 없다면 [prototype]이 가리키는 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례대로 검색하는데 이걸 프로토타입 체인이라고 한다.

var student = {
  name: 'Lee',
  score: 90
}

// Object.prototype.hasOwnProperty()
console.log(student.hasOwnProperty('name')); // true

원래 student 객체에는 hasOwnProperty 메소드를 가지고 있진 않지만 student의 부모 역할을 하는 프로토타입 객체의 메소드가 호출되어 true가 떴다.

프로토타입 객체의 확장

프로토타입 객체도 객체이므로 일반 객체처럼 프로퍼티를 추가, 삭제 할 수 있는데 수정 즉시 프로토타입 체인에 반영된다.

특정 프로토타입 객체에 메소드를 추가하게 되면 프로토타입 체인에 반영되어 특정 프로토타입 객체에 생성된 생성자 함수를 통하여 추가된 메소드에 접근하는 것이 가능하다.

profile
개발위키겸 개발관련 콘텐츠에 대한 경험을 기록하는 곳

0개의 댓글