[Javascript]자바스크립트 프로토타입 체인 이해하기: 초보자도 쉽게 배우는 방법

자바스크립트 프로토타입 체인은 자바스크립트의 객체 지향 프로그래밍에서 핵심적인 개념입니다. 이 글에서는 자바스크립트 초보자도 쉽게 이해할 수 있도록 프로토타입 체인에 대해 자세히 설명하겠습니다.

≣ 목차

• 프로토타입의 개념 이해하기📚
• 프로토타입 체인이란?🔗
• 프로토타입 체인의 활용 방법🛠️
• 프로토타입 체인의 문제점 및 해결 방법🧐

자바스크립트 객체에 대한 내용은 아래 포스팅을 참고해 주세요😁

[Javascript]자바스크립트 객체 완벽 가이드: 선언, 사용법, 복사

---

01. 프로토타입의 개념 이해하기📚

프로토타입이란 무엇인가

프로토타입(prototype)은 자바스크립트에서 객체 지향 프로그래밍을 구현하는 데 중요한 역할을 합니다. 모든 자바스크립트 객체는 프로토타입이라는 숨겨진 속성을 가지고 있으며, 이 속성은 다른 객체를 참조합니다. 이 참조된 객체는 해당 객체의 프로토타입으로 불리며, 프로토타입 객체는 속성과 메서드를 포함할 수 있습니다. 이를 통해 객체는 프로토타입으로부터 속성과 메서드를 상속받을 수 있습니다.

---

자바스크립트에서 객체 생성과 프로토타입의 관계

모든 자바스크립트 객체는 자신의 프로토타입 객체를 가리키는 내부 링크를 가지고 있습니다. 예를 들어, function Person() {}와 같은 생성자 함수를 사용하면, 이 함수의 prototype 속성이 새로운 객체의 프로토타입이 됩니다.

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person('Alice');
alice.greet(); // "Hello, my name is Alice"

---

프로토타입과 proto 차이점

__proto__는 객체 간의 상속 관계를 나타내며, prototype은 함수 객체가 생성할 객체의 기본 구조(프로토타입)를 정의하는 데 사용됩니다.

const exampleObj = {};

// __proto__는 모든 객체에 존재하며, 상속에서 부모 객체를 가리킵니다.
console.log(exampleObj.__proto__);

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

console.log(Person.prototype);

---

프로토타입의 기본 구조

모든 함수 객체는 prototype 프로퍼티를 가지고 있으며, 이를 통해 생성되는 객체는 이 프로토타입을 상속받습니다.

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

console.log(Animal.prototype); // {}
console.log(Animal.prototype.constructor === Animal); // true

const dog = new Animal("Dog");

console.log(dog.__proto__); // Animal.prototype
console.log(dog.__proto__ === Animal.prototype); // true

---

02. 프로토타입 체인이란?🔗

프로토타입 체인의 정의

프로토타입 체인이란 객체가 자신의 프로토타입을 통해 다른 객체의 속성과 메서드를 상속받는 구조를 말합니다. 이는 자바스크립트의 상속 메커니즘을 이해하는 데 매우 중요합니다.

---

프로토타입 체인의 동작

자바스크립트에서 객체의 프로퍼티나 메서드에 접근할 때, 해당 객체에 존재하지 않으면 프로토타입 체인을 따라가며 상위 프로토타입 객체에서 해당 프로퍼티를 찾습니다. 최상위에는 Object.prototype이 있으며, 여기서도 찾을 수 없으면 undefined를 반환합니다.

const testObj = {};
console.log(testObj.__proto__); // Object.prototype

function Student(name, year) {
  this.name = name;
  this.year = year;
}

console.log(Student.prototype); // Student {}

const alice = new Student('Alice', 2003);
console.log(alice.__proto__ === Student.prototype); // true

---

인스턴스 메서드와 프로토타입 메서드의 차이

인스턴스마다 메서드를 정의하면 메모리 낭비가 발생할 수 있습니다. 이를 피하기 위해 프로토타입에 메서드를 정의하는 것이 좋습니다. 프로토타입 메서드는 객체의 프로토타입(prototype)에 정의된 메서드입니다. 이 메서드들은 모든 해당 객체의 인스턴스에서 공유됩니다. 즉, 모든 객체 인스턴스가 동일한 메서드 인스턴스를 참조하게 됩니다.

function Car(make, model) {
  this.make = make;
  this.model = model;

  this.start = function () {
    return `${this.make} ${this.model} is starting!`;
  };
}

const car1 = new Car("Toyota", "Corolla");
const car2 = new Car("Honda", "Civic");

console.log(car1.start()); // "Toyota Corolla is starting!"
console.log(car2.start()); // "Honda Civic is starting!"
console.log(car1.start === car2.start); // false

위와 같은 방식은 메모리를 낭비하게 됩니다. 이를 개선하려면 프로토타입에 메서드를 정의합니다.

function Car(make, model) {
  this.make = make;
  this.model = model;
}

Car.prototype.start = function () {
  return `${this.make} ${this.model} is starting!`;
};

const car1 = new Car("Toyota", "Corolla");
const car2 = new Car("Honda", "Civic");

console.log(car1.start()); // "Toyota Corolla is starting!"
console.log(car2.start()); // "Honda Civic is starting!"
console.log(car1.start === car2.start); // true

이 경우, start 메서드는 모든 Car 인스턴스가 공유하게 되어 메모리 효율이 개선됩니다.

---

메서드 오버라이딩과 프로퍼티 쉐도잉

• 메서드 오버라이딩: 상속 관계에서 자식 클래스가 부모 클래스의 동일한 이름의 메서드를 재정의(override)하는 것을 말합니다. 이를 통해 자식 클래스는 부모 클래스의 동작을 변경하거나 확장할 수 있습니다. 자바스크립트에서는 프로토타입 체인을 이용하여 메서드 오버라이딩을 구현합니다.
  
  
• 프로퍼티 쉐도잉: 프로퍼티 쉐도잉은 상속 관계에서 자식 클래스가 부모 클래스의 프로퍼티와 동일한 이름의 프로퍼티를 정의하는 것을 말합니다. 이때, 자식 클래스의 프로퍼티가 부모 클래스의 프로퍼티를 "가리게" 되어, 부모 클래스의 프로퍼티에 직접 접근할 수 없게 됩니다.

자바스크립트에서는 인스턴스 메서드가 프로토타입 메서드보다 우선시됩니다.

function Bird(type) {
  this.type = type;
  this.fly = function () {
    return "Flying!";
  };
}

Bird.prototype.fly = function () {
  return "Soaring in the sky!";
};

const eagle = new Bird("Eagle");
console.log(eagle.fly()); // "Flying!" - 인스턴스 메서드가 우선시됩니다.

위 예제에서 eagle 객체는 인스턴스 메서드로 정의된 fly 메서드를 사용합니다. 프로토타입에 정의된 fly 메서드는 무시됩니다.

---

getPrototypeOf와 setPrototypeOf 사용하기

Object.getPrototypeOf와 Object.setPrototypeOf 메서드를 사용하여 프로토타입을 조회하고 변경할 수 있습니다.

function Vehicle(type) {
  this.type = type;
}

Vehicle.prototype.drive = function () {
  return `${this.type} is driving!`;
};

function Bike(type) {
  this.type = type;
}

const myVehicle = new Vehicle("Car");
const myBike = new Bike("Mountain Bike");

console.log(Object.getPrototypeOf(myBike) === Bike.prototype); // true

Object.setPrototypeOf(myBike, Vehicle.prototype);
console.log(myBike.drive()); // "Mountain Bike is driving!"

---

03. 프로토타입 체인의 활용 방법🛠️

프로토타입 체인은 자바스크립트에서 객체 지향 프로그래밍을 구현하는 중요한 도구입니다. 이를 활용하여 객체의 상속, 메서드 공유, 코드 재사용성을 높일 수 있습니다. 프로토타입 체인을 효과적으로 활용하는 방법을 몇 가지 소개합니다.

자바스크립트 상속에 관한 내용은 아래 포스팅을 참고해 주세요👀

[Javascript]자바스크립트 상속 완벽 가이드: 기본 개념부터 실전 예제까지

1. 프로토타입을 이용한 상속

프로토타입 체인을 활용하여 객체 간의 상속을 구현할 수 있습니다. 이를 통해 코드 재사용성을 높이고, 객체 간의 관계를 명확하게 정의할 수 있습니다.

예제: 상속 구현

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

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a noise.`);
};

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

// Dog의 프로토타입을 Animal의 프로토타입으로 설정
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log(`${this.name} barks.`);
};

const rex = new Dog('Rex', 'German Shepherd');
rex.speak(); // "Rex makes a noise."
rex.bark();  // "Rex barks."

---

2. 메서드 공유를 통한 메모리 절약

프로토타입 체인을 이용하면 각 객체 인스턴스마다 메서드를 중복 정의하지 않고도 메서드를 공유할 수 있습니다. 이를 통해 메모리를 절약할 수 있습니다.

예제: 메서드 공유

function Car(make, model) {
  this.make = make;
  this.model = model;
}

Car.prototype.start = function() {
  console.log(`${this.make} ${this.model} is starting!`);
};

const car1 = new Car("Toyota", "Corolla");
const car2 = new Car("Honda", "Civic");

console.log(car1.start === car2.start); // true
car1.start(); // "Toyota Corolla is starting!"
car2.start(); // "Honda Civic is starting!"

---

3. 객체 조립(Composition) 패턴

상속보다 객체 조립(Composition) 패턴을 사용할 수도 있습니다. 이 패턴에서는 작은 기능 단위의 객체들을 조립하여 더 복잡한 객체를 생성합니다. 이를 통해 유연하고 재사용 가능한 코드 구조를 만들 수 있습니다.

예제: 객체 조립

const canEat = {
  eat() {
    console.log(`${this.name} is eating.`);
  }
};

const canWalk = {
  walk() {
    console.log(`${this.name} is walking.`);
  }
};

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

Object.assign(Person.prototype, canEat, canWalk);

const john = new Person('John');
john.eat();  // "John is eating."
john.walk(); // "John is walking."

---

4. 프로토타입 체인을 통한 메서드 오버라이딩

프로토타입 체인을 이용하여 자식 객체에서 부모 객체의 메서드를 오버라이드할 수 있습니다. 이를 통해 객체의 동작을 재정의할 수 있습니다.

예제: 메서드 오버라이딩

function Bird(type) {
  this.type = type;
}

Bird.prototype.fly = function() {
  console.log(`${this.type} is flying.`);
};

function Eagle(type) {
  Bird.call(this, type);
}

Eagle.prototype = Object.create(Bird.prototype);
Eagle.prototype.constructor = Eagle;

Eagle.prototype.fly = function() {
  console.log(`${this.type} is soaring high.`);
};

const myEagle = new Eagle('Eagle');
myEagle.fly(); // "Eagle is soaring high."

---

5. ES6 클래스 문법 활용

ES6 클래스 문법은 프로토타입 체인을 보다 직관적으로 사용할 수 있도록 도와줍니다. 이를 통해 클래스를 정의하고 상속 구조를 쉽게 구현할 수 있습니다.

예제: ES6 클래스

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

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

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

  bark() {
    console.log(`${this.name} barks.`);
  }
}

const rex = new Dog('Rex', 'German Shepherd');
rex.speak(); // "Rex makes a noise."
rex.bark();  // "Rex barks."

자바스크립트 클래스에 관한 내용은 아래 포스팅을 참고해 주세요👇

[Javascript]자바스크립트 클래스 이해하기

---

04. 프로토타입 체인의 문제점 및 해결 방법🧐

문제점

1. 성능 문제: 프로토타입 체인을 통해 상속된 속성이나 메서드를 접근할 때, 체인이 길어질수록 속성을 찾기 위해 많은 시간이 소요될 수 있습니다. 특히, 체인이 깊을수록 이러한 문제가 심화됩니다.

2. 상속 구조의 복잡성: 프로토타입 체인을 활용한 다중 상속이나 복잡한 상속 구조는 코드의 가독성을 떨어뜨리고, 유지보수를 어렵게 만듭니다. 상속 계층이 깊어질수록 디버깅이 어려워질 수 있습니다.

3. 객체 공유 문제: 프로토타입 체인을 통해 상속된 객체의 속성이 참조 타입(예: 배열, 객체)인 경우, 모든 인스턴스가 같은 참조를 공유하게 되어 예기치 않은 버그가 발생할 수 있습니다.

4. 프로토타입 체인의 동적 특성: 프로토타입 체인은 동적으로 변경될 수 있어, 의도치 않게 프로토타입이 변경되면 예기치 않은 동작이 발생할 수 있습니다.

---

해결 방법

1. ES6 클래스 사용: ES6에서 도입된 class 문법을 사용하면 더 직관적이고 명확한 상속 구조를 만들 수 있습니다. 클래스 문법을 사용하면 프로토타입 체인을 직접 다루는 것보다 간단하고, 코드 가독성도 향상됩니다.

class Parent {
    constructor(name) {
        this.name = name;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

class Child extends Parent {
    constructor(name, age) {
        super(name);
        this.age = age;
    }

    sayAge() {
        console.log(`I am ${this.age} years old`);
    }
}

const child = new Child('John', 25);
child.sayHello();  // Hello, my name is John
child.sayAge();    // I am 25 years old

2. 객체 복사: 객체의 속성이 참조 타입일 경우, 새로운 객체를 생성할 때 복사본을 만들어 각 인스턴스가 독립적인 속성을 갖도록 합니다. 이를 통해 참조 공유 문제를 방지할 수 있습니다.

class Parent {
    constructor(items) {
        this.items = [...items];  // 배열의 복사본 생성
    }
}

const parent1 = new Parent([1, 2, 3]);
const parent2 = new Parent([4, 5, 6]);

parent1.items.push(4);
console.log(parent1.items); // [1, 2, 3, 4]
console.log(parent2.items); // [4, 5, 6]

3. Composition over Inheritance: 상속보다 컴포지션(구성)을 활용하여 객체를 조립하는 방식으로 코드 재사용성을 높입니다. 이는 상속으로 인한 복잡성을 줄이고, 유연성을 증가시킵니다.

const sayHelloMixin = (obj) => {
    obj.sayHello = function() {
        console.log(`Hello, my name is ${this.name}`);
    };
};

const sayAgeMixin = (obj) => {
    obj.sayAge = function() {
        console.log(`I am ${this.age} years old`);
    };
};

const person = {
    name: 'John',
    age: 25
};

sayHelloMixin(person);
sayAgeMixin(person);

person.sayHello(); // Hello, my name is John
person.sayAge();   // I am 25 years old

4. Object.create() 사용: 특정 객체를 프로토타입으로 갖는 새로운 객체를 생성할 때 Object.create()를 사용하면 보다 명확한 프로토타입 체인을 구성할 수 있습니다.

const parent = {
    sayHello() {
        console.log('Hello');
    }
};

const child = Object.create(parent);
child.sayHello(); // Hello