Javascript Prototype 정리

유승완·2022년 12월 1일
0

Today I Learned

목록 보기
10/11

프로토타입

1. 프로토타입이란 ?

자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있습니다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 합니다. 객체가 만들어지기 위해서는 자신을 만드는 데 사용된 원형인 프로토타입 객체를 이용하여 객체를 생성합니다. 이때 만들어진 __proto__ 속성이 자신을 만들어낸 원형을 의미하는 프로토타입 객체를 참조하는 숨겨진 링크가 있습니다. 이 숨겨진 링크를 프로토타입이라고 합니다.
💡 프로토타입 : 자신을 만들어낸 원형

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

// student에는 hasOwnProperty 메소드가 없지만 아래 구문은 동작한다.
console.log(student.hasOwnProperty('name')); // true

console.dir(student);

자바스크립트의 모든 객체는 Prototype을 가지고 있습니다. 위 예시로는 student라는 객체의 Prototype은 Object 입니다.
그래서 Object의 메소드인 hasOwnProperty를 사용할 수 있습니다. 대부분의 객체의 최상위 Prototype은 Object이며 Object의 Prototype은 null 입니다.

2.프로토타입 체이닝

프로토타입 링크(__proto__)를 따라 검색하는 것을 말합니다.
객체의 프로퍼티나 메소드를 사용할 때, 해당 객체에 프로퍼티가 존재하지 않는다면 현재 객체의 __proto__ 프로퍼티가 있는지 체크하고 없다면 부모의 __proto__ 객체를 탐색하며, 최종 Object.prototype 객체까지 없으면 undefined를 반환합니다.

let animal = {
  walk(){
    alert(`${this.name}가 걸어갑니다.`)
  }
}

let tiger = {
  name: "호랑이",
  __proto__: animal
}

console.log(tiger.walk())

를 실행해보면 alert으로 호랑이가 걸어갑니다.가 나옵니다. 이렇게 __proto__로 연결시켜 tiger에서도 walk()를 사용할 수 있는 개념이
프로토타입 체이닝 입니다.

profile
나를 위한 기록

0개의 댓글