[Javascript] 프로토타입(Prototype) 이해하기

해피몬·2024년 7월 20일
post-thumbnail

프로토타입이란? 🤔

프로토타입은 JavaScript에서 객체와 상속을 이해하는 데 중요한 개념으로, 모든 객체는 다른 객체로부터 프로퍼티와 메서드를 상속받을 수 있도록 설계되어 있음. JavaScript는 클래스를 기반으로 한 언어가 아니라, 프로토타입을 통해 객체를 확장하는 프로토타입 기반 언어임.

프로토타입을 통해 여러 객체가 공통의 프로퍼티와 메서드를 공유할 수 있고, 객체 지향 프로그래밍(OOP)의 핵심인 상속을 구현할 수 있음.

프로토타입 체인 🧵

JavaScript에서 객체는 다른 객체의 프로퍼티와 메서드를 참조할 수 있는 프로토타입 체인(Prototype Chain)을 가짐. 객체는 특정 프로퍼티나 메서드가 없을 때, 자신의 프로토타입 객체에서 이를 찾음. 만약 프로토타입 객체에도 해당 프로퍼티나 메서드가 없다면, 프로토타입 체인을 따라 계속 상위 프로토타입으로 올라가며 탐색을 진행함.

프로토타입 체인을 통해 객체가 서로의 메서드와 속성을 상속받을 수 있으며, Object.prototype에 도달하면 체인이 끝남. Object.prototype은 최상위 프로토타입으로, 모든 객체의 부모 역할을 함.

프로토타입 예제

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

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

const person1 = new Person('Alice');
const person2 = new Person('Bob');

person1.sayHello(); // "Hello, my name is Alice"
person2.sayHello(); // "Hello, my name is Bob"

프로토타입의 주요 특징 🌟

모든 객체는 프로토타입을 가짐

JavaScript의 모든 객체는 기본적으로 프로토타입을 가지며, 이는 proto 속성을 통해 접근할 수 있음. 프로토타입 체인을 따라 상속을 탐색하기 때문에, 객체는 프로토타입 체인에 존재하는 모든 메서드와 프로퍼티를 사용할 수 있음.

프로토타입 상속

프로토타입은 객체 간 상속을 가능하게 함. 부모 객체에 정의된 프로퍼티나 메서드는 자식 객체에서 접근할 수 있으므로, 각 객체마다 중복 코드 작성 없이 공통 기능을 공유할 수 있음.

동적 확장

JavaScript의 프로토타입은 동적 확장이 가능함. 객체가 생성된 후에도 프로토타입에 메서드나 프로퍼티를 추가하면, 해당 객체를 사용하는 모든 인스턴스가 이를 공유하게 됨.

프로토타입 메서드와 속성 🔍

Object.create()

Object.create()는 특정 프로토타입을 가지는 객체를 생성할 때 사용됨. 이를 통해 객체는 직접 상속받을 프로토타입을 지정할 수 있음.

const animalPrototype = {
  speak() {
    console.log('I am an animal');
  }
};

const cat = Object.create(animalPrototype);
cat.speak(); // "I am an animal"

constructor

프로토타입에는 기본적으로 constructor 속성이 포함되어 있어 객체가 어떤 생성자 함수로 만들어졌는지를 나타냄. 이 속성은 생성자 함수와 인스턴스 객체 간의 연결을 유지해줌.

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

const myCar = new Car('Tesla');
console.log(myCar.constructor === Car); // true

proto 속성

proto 속성은 객체의 프로토타입에 접근할 수 있도록 해줌. 이 속성은 표준화된 접근 방식은 아니지만, 프로토타입 체인을 이해하는 데 도움이 됨.

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

프로토타입을 사용하는 이유 🤔

  • 메모리 효율성: 모든 객체에 중복되는 메서드를 개별적으로 생성하지 않고, 프로토타입에 정의하여 모든 객체가 이를 공유할 수 있어 메모리를 효율적으로 사용함.
  • 상속: 프로토타입을 사용하여 객체 간 상속을 구현할 수 있어, 코드의 재사용성과 확장성이 높아짐.
  • 객체 지향 프로그래밍 지원: 프로토타입을 통해 객체 지향의 핵심 개념인 상속, 캡슐화 등을 지원하여, 더 구조화된 코드 작성이 가능해짐.
profile
슬기로운개발생활🤖

0개의 댓글