자바스크립트 생성자 함수와 프로토타입 체인의 메서드 비교 및 선택 기준

02 Oct 2023

javascript

자바스크립트에서 객체를 생성하고 메서드를 추가하는 데에는 여러 가지 방법이 있습니다. 이 중에서 가장 일반적인 방법은 생성자 함수와 프로토타입 체인을 사용하는 것입니다. 이 글에서는 생성자 함수와 프로토타입 체인의 메서드를 비교하고 선택하는 기준에 대해 알아보겠습니다.

생성자 함수와 인스턴스 메서드

생성자 함수는 객체를 생성하는데 사용되는 함수입니다. 객체를 생성할 때 생성자 함수를 호출하면 새로운 인스턴스가 생성되고, 해당 인스턴스의 속성과 메서드를 설정할 수 있습니다. 생성자 함수 내부에는 this 키워드를 사용하여 현재 생성되는 인스턴스를 참조할 수 있습니다.

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

Person.prototype.introduce = function() {
  console.log("안녕하세요, 저는 " + this.name + "입니다. " + this.age + "살입니다.");
};

var person1 = new Person("Alice", 25);
person1.introduce();  // 출력: 안녕하세요, 저는 Alice입니다. 25살입니다.

위 예제에서 Person 생성자 함수는 name과 age 속성을 가진 객체를 생성합니다. 이 객체에는 introduce 메서드도 포함되어 있습니다. introduce 메서드는 Person 생성자 함수의 프로토타입에 정의되어 있으므로, 모든 Person 인스턴스에서 접근 가능합니다.

프로토타입 체인과 공유 메서드

프로토타입 체인은 자바스크립트에서 객체 간의 상속을 구현하는 메커니즘입니다. 생성자 함수의 프로토타입 객체에 메서드를 추가하면, 해당 생성자 함수로 생성된 모든 객체가 이 메서드를 공유합니다. 프로토타입 체인을 사용하면 객체 간의 코드 중복을 줄일 수 있고, 메모리를 절약할 수 있습니다.

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

var person2 = new Person("Bob", 30);
person2.introduce();  // 출력: 안녕하세요, 저는 Bob입니다. 30살입니다.
person2.sayHello();  // 출력: 안녕하세요!

위 예제에서 Person.prototype.sayHello 메서드를 추가하여 모든 Person 인스턴스에서 이 메서드를 사용할 수 있게 되었습니다. 이렇게 프로토타입 체인을 통해 메서드를 공유하면, 각각의 인스턴스에서 메서드를 개별적으로 정의할 필요가 없으므로 코드가 간결해집니다.

메서드 선택 기준

생성자 함수와 프로토타입 체인을 사용하여 메서드를 추가할 때에는 몇 가지 고려 사항을 고려해야 합니다.

인스턴스별로 다른 동작이 필요한 경우: 만약 메서드가 각각의 인스턴스마다 다른 동작을 해야 한다면, 생성자 함수 내부에서 인스턴스 메서드로 정의하는 것이 적절합니다. 이렇게 하면 각 인스턴스가 서로 다른 동작을 수행할 수 있습니다.
같은 동작을 공유해야 하는 경우: 반대로, 메서드가 모든 인스턴스에서 공통적으로 사용되는 동작이라면 프로토타입 체인을 사용하여 공유 메서드로 정의하는 것이 좋습니다. 이렇게 하면 각 인스턴스마다 메서드가 복사되지 않고, 한 곳에서 메서드를 정의하고 모든 인스턴스에서 사용할 수 있습니다.

생성자 함수와 프로토타입 체인은 개별 객체와 상속 관계를 구현하는데에 매우 유용한 패턴입니다. 메서드를 추가할 때에는 위의 기준을 고려하여 적절한 방법을 선택하면 됩니다.

#JavaScript #생성자함수 #프로토타입체인 #메서드