자바스크립트 프로토타입 메소드(Prototype Method)

09 Sep 2023

javascript

자바스크립트는 프로토타입 기반 언어로서, 객체의 프로토타입(Prototype)을 사용하여 상속 및 메소드 공유를 구현할 수 있습니다.

프로토타입 메소드(Prototype Methods)는 자바스크립트 객체의 프로토타입에 정의된 메소드를 의미합니다. 이러한 메소드는 해당 객체를 생성한 모든 인스턴스에서 공유되어 사용할 수 있습니다.

프로토타입 메소드의 정의

프로토타입 메소드는 자바스크립트의 객체 생성자 함수(Constructor Function)의 프로토타입 객체에 정의됩니다.

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

Person.prototype.sayHello = function() {
    console.log("안녕하세요!");
}

const person1 = new Person("John", 30);
const person2 = new Person("Jane", 25);

person1.sayHello(); // 출력: 안녕하세요!
person2.sayHello(); // 출력: 안녕하세요!

위의 예시에서 sayHello 함수는 Person 생성자 함수의 프로토타입 객체에 정의된 프로토타입 메소드입니다. Person 객체를 생성한 두 인스턴스인 person1과 person2에서 모두 sayHello 메소드를 호출할 수 있습니다.

프로토타입 메소드의 장점

메모리 절약: 프로토타입 메소드는 모든 객체 인스턴스에서 재사용되므로, 메모리 공간을 절약할 수 있습니다.
유지보수성 향상: 프로토타입 메소드는 한번 정의되면 모든 인스턴스에서 공유되므로, 일관된 동작을 보장하고 코드의 중복을 피할 수 있습니다.
동적 업데이트: 프로토타입 메소드는 프로토타입 객체에 정의되므로, 해당 객체에서 메소드를 업데이트하면 모든 인스턴스에서 즉시 사용할 수 있습니다.

프로토타입 메소드와 인스턴스 메소드의 차이

인스턴스 메소드는 객체 인스턴스에 직접 연결되어 사용되는 메소드이고, 프로토타입 메소드는 프로토타입 객체에 정의되어 모든 인스턴스에서 공유되어 사용되는 메소드입니다.

function Person(name, age) {
    this.name = name;
    this.age = age;
  
    // 인스턴스 메소드
    this.sayHello = function() {
        console.log("안녕하세요!");
    }
}

const person1 = new Person("John", 30);
const person2 = new Person("Jane", 25);

person1.sayHello(); // 출력: 안녕하세요!
person2.sayHello(); // 출력: 안녕하세요!

위의 예시에서 Person 생성자 함수에서 sayHello 함수를 인스턴스 메소드로 정의하면, 각 객체 인스턴스마다 sayHello 함수의 복사본을 가지게 됩니다. 따라서, 메모리를 더 사용하게 되고 동일한 동작을 하는 함수를 중복 정의하게 됩니다.

반면에 프로토타입 메소드를 사용하면, 모든 객체 인스턴스가 동일한 sayHello 함수를 공유하므로 메모리를 절약할 수 있습니다.

결론

프로토타입 메소드는 자바스크립트의 객체 상속 및 메소드 공유를 구현하는 강력한 기능입니다. 이를 통해 메모리를 절약하고 유지보수성을 향상시킬 수 있습니다. 프로토타입 메소드를 적절히 사용하여 자바스크립트 코드를 깔끔하고 효율적으로 구성해보세요.