프로토타입이란

객체지향 프로그래밍

객체지향 프로그래밍이란 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임입니다.

 

철학적 사고를 프로그래밍에 접목하려는 시도들이 있었고, 실체는 특징이나 성질을 나타내는 속성을 가지고 있고, 이를 통해 실체를 인식하거나 구별할 수 있습니다. 예를 들어서 사람은 이름, 성별, 나이, 주소 등 다양한 속성을 갖습니다. "이름이 석금용이고 성별은 남자이며 나이는 29살인 사람"으로 속성을 구체적으로 표현하면 특정한 사람을 다른 사람과 구별하여 인식할 수 있습니다.

 

프로그램에 대입해보면, "이름"과 "성별"에만 관심있다고 할 때, 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 표현하는 것을 추상화라 합니다.

 

아래 예시는"이름"과 "성별"이라는 속성을 갖는 객체를 자바스크립트로 표현한 것입니다.

const person ={
    name: 'seokgeumyong',
    age: 29
}

위 예제와 같이 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라 합니다. 객체 안에는 객체의 상태를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작으로 구성됩니다.

프로토타입

여러 사람 속성을 갖는 객체를 만들고 싶습니다. 손수 객체 하나하나 이름을 써서 만들 수 있습니다.

const person1 = {
    name: 'seokgeumyong',
    age: 29,
    sayHi () {
        console.log('Hi!');
    }
}

const person2 = {
    name: 'kimjaemin',
    age: 26,
    sayHi () {
        console.log('Hi!');
    }
}

const person3 = {
    name: 'kimdongchan',
    age: 29,
    sayHi () {
        console.log('Hi!');
    }
}

하지만 이렇게 손수 객체를 만든다는 것은 노동시간이 많이 소비되며 동기적으로 사람 객체가 생성된다고 할 때는 이러한 방법으로는 불가능합니다.

 

이때 생성자 함수를 사용할 수 있습니다. 생성자 함수는 동일한 프로퍼티 구조를 갖는 객체를 여러 개 생성할 때 유용합니다.

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function () {
        console.log('Hi!');
    };
}

const person1 = new Person('seokgeumyong', 29);
const person2 = new Person('kimjaemin', 25);
const person3 = new Person('kimdongchan', 29);

위 예제와 같이 하나의 생성자 함수로 간단하게 동일한 속성을 가진 객체들을 만들 수 있습니다. 그런데 위 예제에서 리팩토링해주어야할 부분이 있습니다. name과 age 속성은 객체마다 값이 다를 수 있기 때문에 각각의 객체들이 가지고 있어야 되지만, sayHi 동작은 모든 객체가 같습니다. 그렇기 때문에 객체들이 개별적으로 가지고 있을 필요없이 다른 공간에 sayHi를 만들어놓고, 객체들이 공유해서 사용하는 것이 좋습니다. 그 공간이 프로토타입입니다. 자바스크립트는 프로토타입을 기반으로 상속을 구현합니다.

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

Person.prototype.sayHi = function () {
    console.log('Hi!');
};

const person1 = new Person('seokgeumyong', 29);
const person2 = new Person('kimjaemin', 25);
const person3 = new Person('kimdongchan', 29);

프로토타입 객체

프로토타입 객체는 객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용됩니다. 프로토타입은 어떤 객체의 상위 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티를 제공합니다.

 

모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖습니다. 이 내부 슬롯의 값은 프로토타입의 참조입니다. [[Prototype]]에 저장되는 프로토타입은 객체 생성 방식에 의해 결정됩니다. 객체 리터럴에 의해 생성된 객체의 프로토타입은 Object.prototype이고 생성자 함수에 의해 생성된 객체의 프로토타입은 생성자 함수의 prototype프로퍼티에 바인딩되어 있는 객체입니다.

 

모든 객체는 하나의 프로토타입을 갖습니다. 그리고 모든 프로토타입은 생성자 함수와 연결되어 있습니다.

 

생성자 함수에서는 prototype 프로퍼티를 통해 프로토타입에 접근할 수 있고, 해당 프로토타입은 contructor 프로퍼티를 통해 생성자 함수에 접근할 수 있습니다. 프로토타입을 통해 상속을 받는 객체의 경우 [[Prototype]] 내부 슬롯에 직접 접근할 수는 없지만, __proto__ 접근자 프로퍼티를 통해 프로토타입에 접근할 수 있습니다.

 

프로토타입은 언제 생성될까요? 바로 생성자 함수가 생성되는 시점에 더불어 생성됩니다. 프로토타입과 생성자함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재합니다.

프로토타입 체인

자바스크립트는 객체의 프로퍼티에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 로퍼티를 순차적으로 검색합니다. 이렇게 연결되어 있는 프로토타입을 프로토타입 체인이라 합니다.

오버라이딩

오버라이딩이란 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용하는 방식을 말하며, 프로토타입과 객체 관계에서도 오버라이딩이 일어날 수 있습니다.