자바스크립트 Prototype: 개념, 활용, 장단점, 예제 코드

자바스크립트 Prototype: 개념, 활용, 장단점, 예제 코드

Prototype이란?

자바스크립트는 프로토타입 기반 언어로, 모든 객체는 다른 객체로부터 상속된 프로토타입을 가지고 있습니다. 이 프로토타입은 해당 객체의 부모 역할을 하며, 객체 간에 프로토타입 체인을 형성합니다. 자바스크립트의 모든 객체는 자신의 프로토타입을 가리키는 __proto__라는 내부 프로퍼티를 가지고 있습니다.

역할

1. 상속: 객체가 프로토타입을 가지고 있으면, 해당 프로토타입의 프로퍼티와 메소드를 상속받아 사용할 수 있습니다.
2. 메소드 및 프로퍼티 공유: 여러 객체가 하나의 프로토타입을 공유하면, 해당 프로토타입에 대한 변경이 모든 객체에 영향을 미칩니다.

사용 상황

1. 상속 구현

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.sayHello(); // 출력: Hello, I'm Buddy

2. 프로토타입 체인

const myArray = [1, 2, 3];
console.log(myArray.toString()); // 배열이 Array.prototype을 상속받아 toString 메소드 사용

장단점

장점

• 메모리 최적화: 여러 객체가 하나의 프로토타입을 공유하므로, 중복된 메소드와 프로퍼티를 메모리에 한 번만 저장하여 자원을 효율적으로 사용할 수 있습니다.
• 동적 확장: 객체의 프로토타입을 동적으로 변경하여 새로운 메소드나 프로퍼티를 추가할 수 있습니다.

단점

• 객체 변경 시 주의: 프로토타입을 변경하면 해당 프로토타입을 상속받는 모든 객체에 영향을 미치므로 주의가 필요합니다.
• 상속 구현 복잡성: 프로토타입을 이용한 상속 구현은 명시적이지 않아 처음 보는 사람들에게 혼란을 줄 수 있습니다.

예제 코드

1. 상속 구현

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

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

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

Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;

const myCircle = new Circle(5);
myCircle.move(1, 2);
console.log(myCircle.x, myCircle.y); // 출력: 1, 2

2. 프로토타입 체인 활용

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

Person.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

const john = new Person('John');
john.sayHello(); // 출력: Hello, I'm John

연관된 기술

ES6 Class 문법

ES6부터 도입된 Class 문법은 프로토타입 기반의 상속을 보다 명시적이고 간편하게 구현할 수 있게 해주는 문법입니다. 하지만 내부적으로는 여전히 프로토타입을 활용합니다.

class

 Animal {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
}

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.sayHello(); // 출력: Hello, I'm Buddy

자바스크립트의 프로토타입은 코드의 재사용성과 메모리 최적화에 기여하는 중요한 요소입니다. 적절한 상황에서 활용함으로써 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.