✨SEB FE
이전..글에 이어서! 프로토타입 체인에 대한 내용! <- 진짜 어렵다.. 모던 자바스크립트 deep dive 참조
💡 When you hace a dream, you've got to grab it and never let go.
📌 프로토타입 체인
프로토타입 체인?!
이 전의 글 마지막에 __proto__를 이용하여 인스턴스의 프로토타입, 그 프로토타입의 프로토타입을 체인의 끝인 Object까지 확인할 수 있다... 고 하였는데 이를 이용하여 JavaScript는 상속을 구현한다.!
객체 지향 프로그래밍의 특성 중 상속을 JavaScript에서 구현할 때에는 프로토타입 체인을 사용한다.
-
JavaScrip는 특정 객체의 프로퍼티나 메소드에 접근시 객체 자신의 것뿐 아니라
__proto__가 가리키는 링크를 따라서 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 접근할 수 있다. -
특정 객체의 프로퍼티나 메소드 접근시 만약 현재 객체의 해당 프로퍼티가 존재하지 않는다면
__proto__가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것이 바로 프로토타입 체인이다. -
모든 프로토타입 체이닝의 종점은 Object.prototype이다.
-
하위 객체는 상위 객체의 프로퍼티나 메소드를 상속받는 것이 아니라 공유한다.
-
해당 객체에 없는 프로퍼티나 메소드를 접근할 때 프로토타입 체이닝이 일어난다.
function Person(name) {
this.name = name;
}
//프로토타입 메서드
Person.prototype.sayHello = function() {
console.log(`Hi! my name is ${this.name}`);
};
const me = new Person('Lee');
console.log(me.hasOwnProperty('name'); //true위의 예제에서 Person 생성자 함수에 의해 생성된 me 객체가 hasOwnProperty를 호출할 수 있는 이유는 Person.prototype뿐만 아니라 Object.prototype도 상속 받았기 때문이다. 프로토타입 체인을 그림으로 표현하면 아래와 같다.
프로토타입 체인은 자바스크립트가 객체 지향 프로그래밍의 상속을 구현하는 메커니즘이다.
DOM을 이용하여 만든 div 요소를 통해 프로토타입 체인 확인하기!
let div = document.createElement('div');
console.log(div.__proto__)
console.log(div.__proto__.__proto__)
console.log(div.__proto__.__proto__.__proto__)
console.log(div.__proto__.__proto__.__proto__.__proto__)
console.log(div.__proto__.__proto__.__proto__.__proto__.__proto__)
console.log(div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__)
console.log(div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__)
✨ 마무리
아..~ 이해가 될랑말랑... 으으으 조금 답답한 상태지만 객체 지향의 상속을 Java와 조금 다른 방식으로 구현한다는 것을 이해한 것 같다.! 그래ㅐ도 많이 이해했다..! 깊게 들어가면 너무 어렵지만, 이 부분은 중요한 부분이기 때문에!!! 열심히 공부해봐야겟다
