개요

자바스크립트에서 객체를 생성하기 위해 생성자 함수와 프로토타입을 사용하는 방식에 대해 알아보겠습니다. 생성자 함수는 객체를 생성하고 초기화하는데 사용되며, 프로토타입은 객체의 기능과 속성을 정의하는데 사용됩니다.

생성자 함수와 객체 생성

생성자 함수는 new 키워드와 함께 호출되어 객체를 생성하고 반환합니다. 생성자 함수는 일반적으로 대문자로 시작하여 구분하기 쉽게 작성됩니다. 생성자 함수 내에서는 this 키워드를 사용하여 생성된 객체의 속성을 설정합니다.

다음은 Person 생성자 함수를 사용하여 객체를 생성하는 예제입니다.

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

var person1 = new Person("John", 25);
console.log(person1); // 출력: Person { name: 'John', age: 25 }

프로토타입과 메서드 추가

프로토타입은 생성자 함수로부터 생성된 모든 객체가 공유하는 속성과 메서드를 정의하는데 사용됩니다. 이는 메모리를 절약하며, 객체들 간의 상호작용을 용이하게 합니다.

아래 예제에서는 Person 생성자 함수의 프로토타입에 sayHello 메서드를 추가하는 방법을 보여줍니다.

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

person1.sayHello(); // 출력: Hello, my name is John

프로토타입에 추가된 sayHello 메서드는 person1 객체 뿐만 아니라 Person 생성자 함수로 생성된 모든 객체에서 사용할 수 있습니다.

상호작용 예제

생성자 함수와 프로토타입 간의 상호작용을 이해하기 위해 다음 예제를 살펴봅시다. 예제에서는 Circle 생성자 함수를 사용하여 원 객체를 생성하고, 원의 넓이를 계산하는 메서드를 프로토타입에 추가합니다.

function Circle(radius) {
  this.radius = radius;
}

Circle.prototype.getArea = function() {
  return Math.PI * this.radius * this.radius;
};

var circle1 = new Circle(5);
console.log(circle1.getArea()); // 출력: 78.54

위 예제에서 getArea 메서드는 Circle 생성자 함수로부터 생성된 모든 원 객체에서 사용할 수 있으며, 원 객체마다 중복으로 메모리를 사용하지 않습니다.

결론

자바스크립트에서 객체를 생성하고 관리하기 위해 생성자 함수와 프로토타입을 사용하는 방식을 이해하는 것은 중요합니다. 생성자 함수로 객체를 생성하고 프로토타입을 통해 객체에 메서드를 추가하는 방법을 숙지하면 효율적이고 재사용 가능한 코드를 작성할 수 있습니다.

#javascript #프로토타입