⛓️프로토타입 객체 / prototype / 생성자 함수 이해하기⛓️

자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그래서 상속 개념처럼 부모 객체의 프로퍼티나 메소드를 상속받아 사용할 수 있다. 

 

즉,  부모 역할을 하는 객체를 prototyp(프로토타입)객체 또는 prototpe(프로토타입)이라고 한다.

 

let person = {
  name : "kate",
  age : 20
 }
 // person 객체에는 hasOwnProperty 메소드가 없지만 작동한다.
 console.log(person.hasOwnProperty('name')); //true

// person 객체의 부모 객체를 찾아보자
console.dir(person)

# 파란색 네모 부분 : parent 객체의 프로토타입

 

ECMAScript spec에서는 자바스크립트의 모든 객체는 [[Prototype]]이라는 인터널 슬롯(internal slot)를 가진다. [[Prototype]]의 값은 null 또는 객체이며 상속을 구현하는데 사용된다. [[Prototype]] 객체의 데이터 프로퍼티는 get 액세스를 위해 상속되어 자식 객체의 프로퍼티처럼 사용할 수 있다. 하지만 set 액세스는 허용되지 않는다. 라고 되어있다.

[[Prototype]]의 값은 Prototype(프로토타입) 객체이며 __proto__ accessor property로 접근할 수 있다.
__proto__ 프로퍼티에 접근하면 내부적으로 Object.getPrototypeOf가 호출되어 프로토타입 객체를 반환한다.

student 객체는 __proto__ 프로퍼티로 자신의 부모 객체(프로토타입 객체)인 Object.prototype을 가리키고 있다.

 

즉,  자바스크립트의 객체의 부모 객체인 프로토타입 객체를 가지고 있다. 

 

자바스크립트의 객체의 프로토타입 객체를 접근할 수 있을까? 있다! __proto__ 접근가능하다.

 

그리고 __proto__ 접근하면 프로토타입 객체 반환한다. 그리고 부모 객체(프로토타입 객체)인 Object.prototype을 가리킨다.

 

객체는 생성할 때 부모객체(프로토타입)이 결정되지만, 프로토타입 객체를 다른 객체로 변경할 수 있다. 이러한 특징을 이용해 객체의 상속을 구현할 수 있다. 그래서 자바스크립트는 프로토타입 기반으로 상속을 구한다!

 

 

---

생성자 함수란?

 

자바스크립트에서 객체를 생성하는 방법 중에 자바스크립트 엔진에 내장된 객체 생성자 함수를 통해서 먼저 아래와 같이 선언을 해야한다.

 

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.introdue = function() {
    console.log(`안녕하세요. 저는 ${this.name}입니다. 나이는 ${this.age}입니다.`);  
 }  
}

// 자바스크립트 엔진에 내장된 생성자 함수를 통해 인스턴스의 객체 만들기

let newPerson = new Person("kate",20);
newPerson.introduce();

객체 생성자 함수 선언은 function 키워드를 사용하고, 함수명은 대문자로 사용해야 합니다. 그리고 this를 를 이용해 속성과 메소드를 작성합니다.

 

객체 생성자 함수로 인스턴스의 객체를 생성하기 위해서는 new 키워드를 사용합니다.

 

생성자 함수 vs Object.prototype

 

function Person(name, age) {
  this.name = name;
  this.age = age;
  }  
}

Person.prototype.introdue = function() {
    console.log(`안녕하세요. 저는 ${this.name}입니다. 나이는 ${this.age}입니다.`);  
}

let newPerson = new Person("kate",20);
newPerson.introduce();

 

생성자 함수를 이용해 인스턴스의 객체가 생성될 때 마다 메서드가 생성됩니다. 부모 객체(프로토타입 객체)에 메소드를 등록하면 모든 객체가 같은 메소드 공유/참조하게 됩니다.