JavaScript Prototype

개요

https://javascript.plainenglish.io/why-javascript-is-called-prototype-based-e9326562bf43

`JavaScript`의 프로토타입은 언어의 핵심적인 특징 중 하나로, 이는 객체 지향 프로그래밍의 상속을 구현하는 메커니즘입니다. 이번 포스팅에서는 프로토타입을 사용한 예제를 통해 프로토타입 체인, 메서드의 정의, 상속, 그리고 프로퍼티 셰도잉에 대해 깊이 파보겠습니다.

 

프로토타입 체인

모든 `JavaScript` 객체는 `__proto__ `프로퍼티를 가지고 있으며, 이는 해당 객체의 프로토타입을 참조합니다. 클래스의 상속과 유사하게, 객체의 프로토타입은 메서드와 속성을 상속받을 수 있는 템플릿 역할을 합니다. `JavaScript`에서 생성된 객체들은 `prototype` 속성을 가지지 않고 `__proto__` 속성만 가질 수 있습니다. 

const testObj = {};
console.log(testObj.__proto__); // Object.prototype을 가리킵니다.

 

생성자 함수와 프로토타입

생성자 함수를 정의하고 `new` 키워드를 사용해 인스턴스를 만들면, 인스턴스의 `__proto__`는 생성자 함수의 `prototype `프로퍼티를 가리킵니다. 

function IdolModel(name, year) {
    this.name = name;
    this.year = year;
}

console.log(IdolModel.prototype);
const yuJin = new IdolModel('안유진', 2003);
console.log(yuJin.__proto__ === IdolModel.prototype); // true

 

메서드의 정의: 인스턴스 vs 프로토타입

메서드를 인스턴스에 직접 할당하는 방법과 프로토타입을 사용하는 방법 사이에는 중요한 차이가 있습니다.

// 인스턴스 메서드
function IdolModel2(name, year) {
    //...
    this.sayHello = function () {
        return `${this.name}이 인사를 합니다.`;
    }
}
// 프로토타입 메서드
IdolModel3.prototype.sayHello = function () {
    //...
}

인스턴스 메서드는 각 인스턴스마다 독립적인 함수를 가지므로 메모리를 더 많이 사용합니다. 반면, 프로토타입 메서드는 모든 인스턴스가 프로토타입의 단일 메서드를 공유하므로 효율적입니다.

 

상속과 프로토타입

`Object.setPrototypeOf`를 사용하면 인스턴스의 프로토타입을 변경할 수 있으며, 이를 통해 다른 생성자 함수의 프로토타입을 상속받게 할 수 있습니다.

function FemaleIdolModel(name, year) {
    //...
}
Object.setPrototypeOf(ray, IdolModel.prototype);

이러한 함수를 이용한 방식이 아닌 주소값을 바라보게 해주어 상속해주는 방법이 있습니다.

FemaleIdolModel.prototype = IdolModel.prototype;

 

프로퍼티 셰도잉(Property Shadowing)

인스턴스에 동일한 이름의 메서드가 정의되어 있으면, 프로토타입의 메서드는 숨겨지거나 '셰도잉'됩니다. 이것은 클래스에서 메서드를 오버라이드하는 것과 유사합니다.

function IdolModel4(name, year) {
    //...
    this.sayHello = function () {
        // 인스턴스 메서드
    }
}
IdolModel4.prototype.sayHello = function () {
    // 프로토타입 메서드
}

프로토타입은 JavaScript에서 매우 강력한 기능으로, 코드의 재사용성을 높이고 메모리 사용을 최적화하는 데 도움을 줍니다. 객체 지향 프로그래밍의 상속을 모델링하기 위해 필수적이며, 이해하고 사용하면 더 효율적이고 유지보수가 용이한 코드를 작성할 수 있습니다.