9. 프로토타입과 객체지향

프로토타입 객체

자바스크트는 java, C++과 같은 클래스 기반 객체지향 프로그래밍 언어와 다르게 프로토타입 기반 객체지향 프로그래밍 언어.

클래스 기반 객체지향 프로그래밍 언어는  객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성하나,

프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이도 객체를 생성할 수 있음. 

자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결 되어, 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용 가능함. 

이러한 부모 객체를 Prototype(프로토타입) 객체라 부름.

ECMAScript spec에서는 자바스크립트의 모든 객체는 자신의 프로토타입을 가르키는 [[Prototype]] 이라는 숨겨진 프로퍼티를 가짐.

크롬, 파이어 폭스에서는 숨겨진 [[Prototype]] 프로퍼티가 __proto__ 프로퍼티로 구현되어 있음.

const Obj1 = { };

console.log(Obj1.__proto__ === Object.prototype); //true

[[Prototype]] 프로퍼티와 prototype 프로퍼티

[[Prototype]] 프로퍼티는 __proto__ 프로퍼티로 구현되어 있어, __prototype__과 [[Prototype]]은 같은 개념.

함수도 객체이므로 [[Protype]] 프로퍼티를 가지나 함수 객체는 일반 객체와는 달리 prototype 프로퍼티도 소유하게 됨.

prototype 프로퍼티는 프토포타입 객체를 가르키는 [[prototype]] 프로퍼티는 서로 모두 프로토타입을 가르키지만 관점에 차이가 있음.

[[Prototype]] 프로퍼티

- 함수를 포함한 모든 객체가 가지고 있는 프로퍼티.

- 객체의 입장에서 부모의 역할을 하는 프로토타입 객체를 가르키며, 함수 객체의 경우 Function.prototype을 가르킴.

prototype 프로퍼티

- 함수 객체만 갖고 있는 프로퍼티로 함수 객체가 생성자로 사용될 때 이 함수를 통해 생성될 객체 부모 역할을 하는 프로토타입을 가르킴.

Constructor 프로퍼티

프로토타입 객체는 객체의 입장에서 자신을 생성한 객체를 가르키는 constructor 프로퍼티를 가짐. 

Prototype chain

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

const person = {
  name: 'june',
  age: 20,
}

console.log(person.hasOwnProperty('name')); // true

person은 hasOwnProperty 메소드를 갖고 있지 않지만,

person 객체의 [[Prototype]] 프로퍼티의 부모 역활을 하는 프로토타입 객체(Object.prototype)의 메소드를 호출하였기 때문에 사용 가능함. 

참고 : https://poiemaweb.com/