프로토타입과 상속

자바스크립트는 프로토타입 기반 언어로, 객체 간의 상속을 구현하는 방식이 클래스 기반 언어와는 다릅니다.

이 절에서는 자바스크립트의 프로토타입과 상속 메커니즘에 대해 자세히 알아보겠습니다.

프로토타입 기반 상속 vs 클래스 기반 상속

1. 프로토타입 기반 상속

객체가 다른 객체로부터 직접 상속받음
동적으로 속성과 메서드를 추가/수정 가능
런타임에 상속 구조 변경 가능

2. 클래스 기반 상속

클래스를 통해 객체 생성 및 상속 구현
정적인 상속 구조
컴파일 시점에 상속 구조 결정

자바스크립트의 프로토타입 상속은 더 유연하지만, 이해하기 어려울 수 있습니다.

프로토타입 체인

모든 자바스크립트 객체는 내부 [[Prototype]] 속성을 가지며, 이는 다른 객체를 참조합니다.

이 체인을 따라 속성과 메서드를 찾습니다.

let animal = {
  eats: true
};
let rabbit = {
  jumps: true
};
rabbit.__proto__ = animal;
 
console.log(rabbit.eats); // true

rabbit 객체에서 eats 속성을 찾지 못하면, 그 프로토타입인 animal 객체에서 찾습니다.

객체 생성과 프로토타입 설정

생성자 함수

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(this.name + ' makes a sound.');
};
let dog = new Animal('Dog');
dog.speak(); // "Dog makes a sound."

Object.create()

let animal = {
  speak: function() {
    console.log(this.name + ' makes a sound.');
  }
};
let dog = Object.create(animal);
dog.name = 'Dog';
dog.speak(); // "Dog makes a sound."

클래스 문법 (ES6+)

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + ' makes a sound.');
  }
}
let dog = new Animal('Dog');
dog.speak(); // "Dog makes a sound."

프로토타입 메서드 공유와 속성 상속

프로토타입을 사용하면 메모리를 효율적으로 사용할 수 있습니다.

function Dog(name) {
  this.name = name;
}
 
Dog.prototype.bark = function() {
  console.log(this.name + ' barks!');
};
 
let dog1 = new Dog('Buddy');
let dog2 = new Dog('Max');
 
dog1.bark(); // "Buddy barks!"
dog2.bark(); // "Max barks!"

여기서 bark 메서드는 모든 Dog 인스턴스 간에 공유됩니다.

프로토타입 오염 (Prototype Pollution)

프로토타입 오염은 기본 객체의 프로토타입을 수정하여 예기치 않은 동작을 일으키는 보안 취약점입니다.

예방 방법

Object.create(null)을 사용하여 프로토타입이 없는 객체 생성
Object.freeze()를 사용하여 프로토타입 수정 방지
사용자 입력을 직접 객체 속성으로 할당하지 않기

ES6 클래스와 프로토타입 상속

ES6 클래스는 프로토타입 상속의 문법적 설탕(Syntactic sugar)입니다.

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + ' makes a sound.');
  }
}
 
class Dog extends Animal {
  bark() {
    console.log(this.name + ' barks!');
  }
}
 
let dog = new Dog('Buddy');
dog.speak(); // "Buddy makes a sound."
dog.bark();  // "Buddy barks!"

장점

더 직관적이고 읽기 쉬운 문법
상속이 명시적으로 표현됨

단점

프로토타입의 동적 특성을 숨길 수 있음
일부 개발자들에게 오해를 일으킬 수 있음 (자바스크립트가 클래스 기반 언어라고 오해)

고급 상속 패턴

1. 믹스인 (Mixins)

여러 객체의 기능을 하나의 객체로 합치는 패턴

let swimmingMixin = {
  swim: function() {
    console.log(this.name + " is swimming.");
  }
};
 
let flyingMixin = {
  fly: function() {
    console.log(this.name + " is flying.");
  }
};
 
function Duck(name) {
  this.name = name;
}
 
Object.assign(Duck.prototype, swimmingMixin, flyingMixin);
 
let duck = new Duck("Donald");
duck.swim(); // "Donald is swimming."
duck.fly();  // "Donald is flying."

2. 팩토리 함수

객체를 생성하는 함수를 사용하여 상속과 합성을 구현

function createAnimal(name) {
  return {
    name: name,
    speak: function() {
      console.log(this.name + " makes a sound.");
    }
  };
}
 
function createDog(name) {
  let dog = createAnimal(name);
  dog.bark = function() {
    console.log(this.name + " barks!");
  };
  return dog;
}
 
let dog = createDog("Buddy");
dog.speak(); // "Buddy makes a sound."
dog.bark();  // "Buddy barks!"

자바스크립트의 프로토타입과 상속 메커니즘은 언어의 핵심 특징 중 하나입니다. 프로토타입 체인을 통해 객체는 다른 객체의 속성과 메서드를 상속받을 수 있으며, 이는 코드 재사용과 메모리 효율성을 높이는 데 기여합니다.

프로토타입 기반 상속은 클래스 기반 상속과 비교하여 더 유연하고 동적입니다. 런타임에 객체의 구조를 변경할 수 있어, 적응성이 높은 코드를 작성할 수 있습니다. 그러나 이러한 유연성은 때때로 예측하기 어려운 동작을 야기할 수 있으므로, 주의 깊게 사용해야 합니다.

객체 생성 방식에 따라 프로토타입 설정 방법이 다릅니다. 생성자 함수, Object.create(), 클래스 문법 등 다양한 방식이 있으며, 각각의 장단점을 이해하고 상황에 맞게 사용하는 것이 중요합니다.

프로토타입 오염은 보안 측면에서 중요한 이슈입니다. 기본 객체의 프로토타입을 수정하지 않도록 주의해야 하며, 필요한 경우 프로토타입이 없는 객체를 생성하거나 객체를 동결하는 등의 방법을 사용할 수 있습니다.

ES6에서 도입된 클래스 문법은 프로토타입 상속을 더 직관적으로 표현할 수 있게 해줍니다. 그러나 이는 문법적 설탕일 뿐, 내부적으로는 여전히 프로토타입 기반으로 동작합니다. 클래스 문법은 코드의 가독성을 높이지만, 자바스크립트의 프로토타입 특성을 완전히 이해하는 것이 중요합니다.

고급 상속 패턴인 믹스인과 팩토리 함수는 더 복잡한 객체 구조와 상속 관계를 구현하는 데 유용합니다. 이러한 패턴들은 코드의 재사용성과 모듈성을 높이는 데 도움이 됩니다.

결론적으로, 자바스크립트의 프로토타입과 상속을 깊이 이해하고 효과적으로 활용하는 것은 언어의 강력한 특성을 최대한 활용하는 데 필수적입니다. 이를 통해 더 유연하고 효율적인 코드를 작성할 수 있으며, 자바스크립트의 고급 기능을 충분히 활용할 수 있게 됩니다.

이전으로 다음으로