[javascript] 객체의 프로토타입과 상속

07 Dec 2023

javascript

개요

JavaScript는 프로토타입 기반 언어로, 객체 지향 프로그래밍에서 상속과 같은 개념을 구현하는 방식이 조금 다릅니다. 이 글에서는 JavaScript의 객체의 프로토타입과 상속에 대해 알아보도록 하겠습니다.

프로토타입

JavaScript에서 모든 객체는 프로토타입을 갖습니다.

프로토타입은 다른 객체로부터 상속되는 속성과 메서드의 집합입니다.
객체는 자신의 프로토타입을 __proto__라는 내부 속성으로 참조합니다.

예시를 통해 프로토타입을 이해해보겠습니다.

// person이라는 객체 생성
var person = {
  name: "John",
  age: 25,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

// person2에 person을 프로토타입으로 설정
var person2 = Object.create(person);

// person2의 프로토타입인 person의 속성과 메서드에 접근
console.log(person2.name); // John
person2.greet(); // Hello, my name is John

상속

JavaScript에서 객체는 생성 시 원하는 프로토타입을 가질 수 있습니다. 이를 이용하여 상속을 구현할 수 있습니다.

// Vehicle이라는 프로토타입 객체 생성
var Vehicle = {
  type: "vehicle",
  start: function() {
    console.log("Vehicle starts");
  }
};

// Car이라는 프로토타입 객체 생성
var Car = Object.create(Vehicle);
Car.type = "car";
Car.drive = function() {
  console.log("Car drives");
};

// Bicycle이라는 프로토타입 객체 생성
var Bicycle = Object.create(Vehicle);
Bicycle.type = "bicycle";
Bicycle.pedal = function() {
  console.log("Bicycle pedals");
};

// Car와 Bicycle 객체 생성
var myCar = Object.create(Car);
var myBicycle = Object.create(Bicycle);

// Car와 Bicycle 상속받은 메서드 호출
myCar.start(); // Vehicle starts
myCar.drive(); // Car drives

myBicycle.start(); // Vehicle starts
myBicycle.pedal(); // Bicycle pedals

결론

JavaScript에서 개체의 프로토타입과 상속은 객체 지향 프로그래밍의 상속과는 다소 다르게 구현됩니다. 프로토타입을 이용하여 객체를 상속받고, 프로토타입 체인을 통해 상위 개체의 속성과 메서드에 접근할 수 있습니다. 이를 통해 JavaScript에서도 상속을 구현할 수 있으며, 좀 더 다양하고 유연한 프로그래밍을 할 수 있습니다.