자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있습니다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 합니다. 객체가 만들어지기 위해서는 자신을 만드는 데 사용된 원형인 프로토타입 객체를 이용하여 객체를 생성합니다. 이때 만들어진
__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 입니다.
프로토타입 링크(
__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()를 사용할 수 있는 개념이
프로토타입 체이닝 입니다.