프로토타입 메소드와 프로퍼티 공유하기

자바스크립트에서는 객체지향 프로그래밍의 중요한 개념 중 하나인 프로토타입을 활용하여 코드의 재사용성을 높일 수 있습니다. 프로토타입은 객체가 생성될 때 해당 객체에 대한 속성과 메소드를 담고 있는 객체입니다. 이번 블로그 포스트에서는 프로토타입 메소드와 프로퍼티를 어떻게 공유하는지에 대해 알아보겠습니다.

프로토타입 메소드 공유하기

프로토타입 메소드는 생성자 함수를 통해 생성된 모든 객체에서 공유되는 메소드입니다. 예를 들어, 다음과 같은 Person 생성자 함수를 만들어보겠습니다.

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

Person.prototype.greet = function() {
  console.log("안녕하세요!" + this.name + "입니다.");
};

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

person1.greet(); // 출력 결과: 안녕하세요! John입니다.
person2.greet(); // 출력 결과: 안녕하세요! Jane입니다.

위의 예시에서 Person.prototype.greet 메소드는 Person 생성자 함수를 통해 생성된 모든 객체에서 공유됩니다. 따라서 person1.greet()person2.greet() 모두 동일한 결과를 출력합니다.

프로토타입 프로퍼티 공유하기

프로토타입을 사용하면 프로토타입 객체에 저장된 프로퍼티들이 생성된 객체에서 공유됩니다. 다음은 프로토타입 프로퍼티를 활용한 예시입니다.

function Shape() {
  this.x = 0;
  this.y = 0;
}

Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
};

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

// Circle의 프로토타입을 Shape 객체로 설정
Circle.prototype = new Shape();

let circle1 = new Circle(5);
let circle2 = new Circle(10);

circle1.move(2, 3);
console.log(circle1.x, circle1.y); // 출력 결과: 2 3

console.log(circle2.x, circle2.y); // 출력 결과: 0 0

위의 예시에서 Shape 생성자 함수와 Circle 생성자 함수를 만들었습니다. Circle 생성자 함수의 프로토타입을 Shape 객체로 설정하여 Shape의 프로퍼티와 메소드를 Circle 객체에서 공유할 수 있게 되었습니다. 따라서 circle1 객체에서 move 메소드를 호출하여 xy 값을 변경하면 circle2 객체에는 영향을 주지 않습니다.

결론

프로토타입을 활용하여 메소드와 프로퍼티를 객체들 사이에서 공유할 수 있습니다. 이를 통해 코드의 재사용성을 높이고 객체지향 프로그래밍의 원칙을 따를 수 있습니다. 자바스크립트에서 프로토타입을 활용하여 객체를 구성하고 필요한 메소드와 프로퍼티를 공유하는 것은 효율적이고 간결한 코드 작성에 도움을 줄 수 있습니다.

참고 자료