Javascript 시작하기 - prototype

자바스크립트의 prototype은 객체 지향 프로그래밍에서 매우 중요한 개념으로, 객체의 상속과 메소드 공유를 가능하게 합니다. 자바스크립트는 클래스 기반 언어가 아니라 프로토타입 기반 언어로, 모든 객체가 다른 객체의 '프로토타입'으로부터 직접 상속을 받습니다.

프로토타입의 기본 개념

자바스크립트에서 각 함수는 자동으로 prototype이라는 속성을 가지고 있습니다. 이 prototype 속성은 객체이며, 이 객체의 프로퍼티는 해당 생성자 함수로 생성된 모든 인스턴스에 상속됩니다.

예제: 생성자 함수와 프로토타입

// 생성자 함수 정의
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 프로토타입에 메서드 추가
Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// 인스턴스 생성
const person1 = new Person("Alice", 30);
const person2 = new Person("Bob", 25);

// 메서드 호출
person1.sayHello(); // "Hello, my name is Alice and I am 30 years old."
person2.sayHello(); // "Hello, my name is Bob and I am 25 years old."

위의 예제에서 sayHello 메서드는 Person의 프로토타입에 추가되어 person1과 person2 인스턴스 모두에서 사용할 수 있습니다. 이는 프로토타입을 통해 메서드와 속성을 공유할 수 있음을 보여줍니다.

프로토타입 체인

자바스크립트에서는 객체의 프로퍼티를 접근할 때 해당 객체에 직접 프로퍼티가 없다면 프로토타입 체인을 따라 검색합니다. 이 과정은 최상위 Object.prototype 객체까지 이어질 수 있습니다.

console.log(person1.hasOwnProperty('name')); // true
console.log(person1.hasOwnProperty('sayHello')); // false
console.log(person1.__proto__ === Person.prototype); // true
console.log(person1.__proto__.__proto__ === Object.prototype); // true

위의 코드에서 person1 인스턴스는 name 속성을 자신의 객체에서 직접 가지고 있으므로 hasOwnProperty가 true를 반환합니다. 그러나 sayHello는 프로토타입 체인을 통해 검색되었기 때문에 false를 반환합니다.

프로토타입의 장점

1. 메모리 절약: 여러 인스턴스 간에 공통 메서드를 공유하여 메모리를 절약할 수 있습니다. 각 인스턴스에 동일한 메서드를 복사하지 않아도 됩니다.
2. 유지보수성: 메서드를 프로토타입에 추가하면 모든 인스턴스에서 해당 메서드를 사용할 수 있으므로 유지보수가 쉬워집니다.
3. 상속 구현: 프로토타입을 통해 객체 간의 상속 관계를 쉽게 구현할 수 있습니다.

프로토타입 상속

자바스크립트에서는 프로토타입 체인을 이용해 객체 상속을 구현할 수 있습니다. 이를 통해 객체 간에 속성과 메서드를 공유할 수 있습니다.

예제: 프로토타입 상속

// Animal 생성자 함수
function Animal(name) {
    this.name = name;
}

// Animal 프로토타입에 메서드 추가
Animal.prototype.move = function() {
    console.log(`${this.name} is moving.`);
};

// Dog 생성자 함수
function Dog(name, breed) {
    Animal.call(this, name); // Animal 생성자 호출
    this.breed = breed;
}

// Dog의 프로토타입을 Animal의 인스턴스로 설정
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Dog 프로토타입에 메서드 추가
Dog.prototype.bark = function() {
    console.log(`${this.name} is barking.`);
};

// 인스턴스 생성
const dog1 = new Dog("Buddy", "Golden Retriever");
dog1.move(); // "Buddy is moving."
dog1.bark(); // "Buddy is barking."

위 예제에서 Dog는 Animal을 상속받아 move 메서드를 사용할 수 있으며, 자신의 고유 메서드인 bark도 가집니다.

프로토타입의 단점

1. 디버깅의 어려움: 프로토타입 체인을 통해 메서드가 검색되기 때문에, 메서드가 어디서 정의되었는지를 찾는 것이 다소 어려울 수 있습니다.
2. 성능 이슈: 프로토타입 체인이 너무 길어질 경우 성능에 영향을 미칠 수 있습니다.

결론

자바스크립트의 prototype은 강력한 도구로, 객체의 메서드와 속성을 공유하고 상속을 구현하는 데 중요한 역할을 합니다. 이를 잘 이해하고 활용하면 자바스크립트의 객체 지향 프로그래밍에서 큰 이점을 얻을 수 있습니다.

prototype을 사용할 때는 언제나 객체 지향 설계의 원칙을 고려하고, 프로토타입 체인이 너무 복잡해지지 않도록 주의해야 합니다.