[자바스크립트] 프로토타입체인

[목표]

- 헷갈리는 자바스크립트 프로토타입기반 객체지향 안헷갈리게 하기

[자바스크립트 객체 그리고 프로토타입체인]

(1) 객체리터럴 : 숏컷 방식(간단하게)

var obj1 = { } 

(2) 생성자 : 위의 객체와 동일한 객체를 만들어냄, function Object()의 인스턴스 객체

var obj2 = new Object()

- Object 타입은 모든 객체의 최상위타입

- 자바스크립트는 프로토타입(객체의 원형을 가진 객체, 함수의 공통된 프로퍼티, 메소드 저장)을 이용한 상속을 지원함

- 그래서 Object 타입 생성자의 프로토타입 객체를 상속받은 인스턴스 객체가 생성되어 obj2에 저장되었다고 표현

- 프로토타입을 이용하여 객체와 객체끼리 연결하고 한쪽 방향으로 상속받는 형태를 만들 수 있음

- 이 형태를 프로토타입 체인이라 함

function Person(name){
     this.name = name;
}
 
Person.prototype.getName = function(){
     return this.name;
}
 
var p1 = new Person("jinbro")
 

- Person이라는 생성자함수의 프로토타입(원형객체)에 getName 메소드를 선언해둠

- p1은 Person 생성자함수의 객체로 생성자함수(Person 타입)의 프로토타입을 상속받음

- console.dir(p1) 으로 콘솔창에 p1 객체를 들여다보자

(1) __proto__ 속성 화살표를 눌러 리스트를 펼쳐보면 getName이라는 function이 있음

(2) __proto__ 속성은 Person 타입(생성자함수)의 프로토타입 객체를 가리키는 객체 프로퍼티

(3) 콘솔창에 Person.protoype 입력 결과와 p1.__proto__ 결과를 확인함

(4) 함수는 프로토타입 객체를 가지고 있음

(5) prototype은 함수 자기자신의 프로토타입 객체 프로퍼티이고, __proto__는 자기보다 상위 함수의 프로토타입객체 프로퍼티임

[결론]

- 자바스크립트는 객체지향 패러다임을 구현하기위해 함수의 프로토타입 객체를 이용함

- 함수를 만든 뒤 console.dir(함수명)을 입력한 뒤 protoype 프로퍼티와 __proto__ 프로퍼티 리스트를 펼쳐 확인해보면 이해하기쉬움

- 프로토타입 체인이라는 것은 프로토타입 객체를 이용하여 객체 간의 상속(공유)관계를 만드는 것을 의미함