[JS] 프로토타입(prototype)

 

 

프로토타입이란?

 

 

객체지향 프로그래밍에서 객체간의 상속과 프로퍼티 공유를 구현하는 매커니즘

Java, C++과 같은 클래스기반 객체지향 프로그래밍 언어와 달리 Javascript는 프로토타입 기반 객체지향 프로그래밍 언어이다.
- 모던자바스크립트 Deep Dive

위의 설명과 같이 Javascript는 프로토타입 기반 언어이다. 객체는 프로토타입을 가지고 있으며, 프로토타입은 해당 객체의 속성과 메서드를 정의한다. 이 프로토타입으로 다른 객체에서 상속받아 사용할 수 있다. 

Javascript는 객체를 생성할 때 프로토타입을 찾는다. 찾지 못할 경우 프로토타입 체인을 따라 상위 프로토타입을 계속 찾아간다. 이런식으로 프로토타입 체인을 통하여 상속관계가 형성된다.

 

 

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

Person.prototype.getName = function() {
  return this.name;
};

Person.prototype.getAge = function() {
  return this.age;
};

var person1 = new Person('John', 30);
var person2 = new Person('Alice', 25);

console.log(person1.getName()); // 출력: John
console.log(person2.getName()); // 출력: Alice

위 코드에서 Person 함수는 name과 age를 인수로 받아 객체를 생성하는 함수이다. 이 함수에서 프로토타입 속성을 사용하여 getName과 getAge메서드를 정의하고, person객체의 프로토타입에 추가한다. 이후 Person함수를 호출하여 새로운 객체를 생성하고, 이 객체에서 getName과 getAge메서드를 호출하여 객체의 name과 age속성을 조회할 수 있다.

 

 

프로토타입은 객체를 생성할 때 결정된다고 했다. 결정된 프로토타입 객체는 다른 객체로 변경할 수 있다. 부모 객체인 프로토타입을 동적으로 변경할 수 있는 것이다. .prototype. 을 통해 새롭게 데이터를 만들 수도 있고, 기존 메서드를 변경할 수 도 있다.

const arr = [1, 2, 3];

Array.prototype.name = "배열"

console.log(arr.name) // "배열"

 

 

Javascript에서 모든 객체는 [[Prototype]]이라는 인터널 슬롯(internal slot)을 가진다. 이는 null 혹은 객체이며 상속을 구현하기 위해 사용된다. __proto__ 로 객체 프로퍼티에 접근할 수 있고, 프로퍼티에 접근할 때 내부적으로 Object.getPrototypeOf가 호출되어 프로토타입 객체를 반환한다.

prototype은 원형일때 존재하고 함수 객체만 가지고있다.

__proto__는 해당 객체의 원형을 가리킨다. 모든 객체가 가지고 있으며 하나의 링크라고 이해할 수 있다.

var person = {
  name: '정인',
  age: 28
}
console.log(person.__proto__ === Object.prototype); // true

 

 

프로토타입 체인(prototype chain)

 

 

인스턴스 객체의 key에 접근할 때, 해당 객체에 찾는 key가 없다면 그 상위 프로토타입에서 key가 있는지 확인한다. 또 없다면 그 key를 찾기 위해서 더 상위의 프로토타입에서 찾는다. 이것을 프로토타입 체인이라고 한다.

 

 

let parent = {
  name: "Parent",
  sayHello: function() {
    console.log("Hello from " + this.name);
  }
};

let child = Object.create(parent);
child.name = "Child";

console.log(child.name);       // "Child"
child.sayHello();              // "Hello from Child"

위 코드에서 child객체는 parent객체를 프로토타입으로 가진다. child객체의 name프로퍼티를 직접 갖고 있지만, sayHello()는 정의되어 있지 않다. 그러나 child.sayHello()를 호출하면 child객체에서 sayHello()메서드를 찾다가 없으면 프로토타입 체인을 따라 올라가서 parent의 sayHello()를 찾아 호출한다. 이러한 동작 방식을 프로토타입 체이닝이라고 한다.