Object 로 알아보는 Prototype

객체란 이름(name)과 값(value)로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다. 프로퍼티 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 한다.

빈 객체 생성하기

• 객체 리터럴 사용

  let user = {};
  console.log(user);  // {}

• Object 생성자 사용

  let user = new Object();
  console.log(user);  // {}

Constructor (생성자)

ESMA6 전까지 자바스크립트에는 클래스 문법이 없었다. 자바스크립트의 객체는 함수를 통해 복사된다.

function User() {
  this.name = 'YoonA';
  this.age = 20;
}

위의 함수는 어떤 것도 return 하지 않기 때문에 undefined가 출력된다.

함수를 복사하기 위해서는 new 키워드를 사용한다. Constructor 자격이 부여되면 new 를 통해 객체를 만들어낼 수 있게 된다.

let YoonA = new User();
console.log(YoonA);  // User {name: 'YoonA', age: 20}

new 연산자는 함수를 객체로 변환하여 복사하고, 복사한 객체를 리턴해준다.

Prototype (프로토타입)

자바스크립트는 객체지향 언어이지만 클래스라는 개념은 없다. 대신 프로토타입이라는 것이 존재한다. 클래스가 없으니 상속 기능도 없다. 따라서 프로토타입을 기반으로 상속을 흉내내도록 구현해 사용한다.

function User(name, age) {
  this.name = name;
  this.age = age;
  this.job = 'singer';
  this.gender = 'female';
}

let YoonA = new User('YoonA', 32);
let Winter = new User('Winter', 21);

// User {name: 'YoonA', age: 32, job: 'singer', gender: 'female'}
// User {name: 'Winter', age: 21, job: 'singer', gender: 'female'}

함수를 복사할 때 name과 age는 각자 다른 데이터를 할당 받지만, job과 gender은 중복된 데이터를 가지게 된다. YoonA와 Winter 객체는 완전히 중복된 프로퍼티를 갖게 된다.

이는 메모리의 낭비가 이루어지며 공통된 프로퍼티는 복사한 객체의 원본이 되는 부모의 프로퍼티를 참조해야 한다. 이런 문제를 프로토타입으로 해결할 수 있다.

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

User.prototype.job = 'singer';
User.prototype.gender = 'female';

let YoonA = new User('YoonA', 32);
let Winter = new User('Winter', 21);

// User {name: 'YoonA', age: 32}
// User {name: 'Winter', age: 21}

console.log(YoonA.job);  // singer

User.prototype이라는 빈 Object가 어딘가에 존재하고, User 함수로부터 생성된 객체들은 어딘가 존재하는 Object에 들어있는 값을 모두 가져다 쓸 수 있다.

자바스크립트에는 Prototype Link 와 Prototype Object 라는 것이 존재하며, 이 둘을 통틀어 프로토타입이라고 부른다.

Prototype Object

객체는 함수(Function)로 생성된다.

function User() {}
const YoonA = new User();  // 함수로 객체 생성

우리가 알고 있는 일반 객체 생성도 위와 같다. 자바스크립트에서 기본적으로 제공하는 Object 함수를 통해 객체는 만들어진다.

const obj = new Object();

함수가 생성되면 prototype이라는 속성을 통해 Prototype Object에 접근할 수 있다. Prototype Object는 일반적인 객체와 같으며, 기본적 속성으로 constructor 과 __proto__ 를 가진다.

constructor은 생성된 함수를 가리키며, __proto__는 객체가 생성될 때 조상이었던 함수의 Prototype Object, 즉 Prototype Link를 말한다.

Prototype Link

YoonA에는 job과 gender이라는 속성이 없지만, YoonA.gender을 실행하면 female이라는 값을 참조한다. 이는 Prototype Object에 존재하는 gender 속성을 참조하는 것이다.

이는 YoonA가 가지고 있는 속성 __proto__ 를 통해 가능하다. 이는 모든 prototype 속성은 함수만 가지고 있는 반면, __proto__ 속성은 모든 객체가 빠짐없이 가지고 있다. 이는 ㅐ객체가 생성될 때 조상이었던 함수의 Prototype Object를 가리킨다. YoonA는 User 함수로부터 생성되었고 User함수의 Prototype Object를 가리키는 것이다.

만약 최상위까지 도달했는데도 못찾을 경우 undefined를 리턴한다. 이렇게 프로토 속성을 통해 상위 프로토타입과 연결되어 있는 형태를 체인(Chain) 이라고 한다.

참고 사이트

[Javascript] 프로타타입 이해하기

자바스크립트 - Object, Constructor, Prototype, Class