[JavaScript 문법] 9일차: 객체의 프로토타입

프로토타입이란?

프로토타입은 객체 지향 프로그래밍에서 객체가 다른 객체로부터 속성과 메서드를 상속받을 수 있도록 하는 메커니즘입니다. JavaScript는 프로토타입 기반 언어로, 모든 객체는 프로토타입을 가질 수 있습니다.

프로토타입 체인

프로토타입 체인은 객체가 다른 객체로부터 상속을 받을 때 형성됩니다. 객체는 자신의 프로토타입에 정의된 속성과 메서드를 사용할 수 있으며, 프로토타입 체인을 따라가면서 상위 객체의 속성과 메서드를 참조할 수 있습니다.

 

예제

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

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

let person1 = new Person('Alice', 25);
let person2 = new Person('Bob', 30);

person1.greet(); // 'Hello, my name is Alice'
person2.greet(); // 'Hello, my name is Bob'

객체의 프로토타입 설정

객체의 프로토타입은 Object.create 메서드를 사용하여 설정할 수 있습니다. 이를 통해 특정 객체를 다른 객체의 프로토타입으로 설정할 수 있습니다.

 

예제

let animal = {
  type: 'Animal',
  sound: function() {
    console.log('Some generic animal sound');
  }
};

let dog = Object.create(animal);
dog.bark = function() {
  console.log('Woof! Woof!');
};

dog.sound(); // 'Some generic animal sound'
dog.bark(); // 'Woof! Woof!'

프로토타입 상속

프로토타입 상속을 통해 객체는 다른 객체의 속성과 메서드를 상속받을 수 있습니다.

 

예제

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

Animal.prototype.sound = function() {
  console.log(this.type + ' makes a sound');
};

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

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

Dog.prototype.bark = function() {
  console.log(this.name + ' says Woof! Woof!');
};

let myDog = new Dog('Buddy');
myDog.sound(); // 'Dog makes a sound'
myDog.bark(); // 'Buddy says Woof! Woof!'

프로토타입 메서드

프로토타입 메서드는 객체의 프로토타입에 정의된 메서드입니다. 이러한 메서드는 해당 프로토타입을 상속받은 모든 객체에서 사용할 수 있습니다.

 

예제

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

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

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

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

프로토타입 속성

__proto__ 속성은 객체의 프로토타입을 참조합니다. Object.getPrototypeOf 메서드를 사용하여 객체의 프로토타입을 가져올 수도 있습니다.

 

예제

let animal = {
  type: 'Animal'
};

let dog = Object.create(animal);

console.log(dog.__proto__ === animal); // true
console.log(Object.getPrototypeOf(dog) === animal); // true

프로토타입 체인과 속성 탐색

객체에서 속성을 검색할 때, JavaScript는 먼저 객체 자체에서 해당 속성을 검색하고, 존재하지 않을 경우 프로토타입 체인을 따라가면서 검색을 이어갑니다.

 

예제

let animal = {
  type: 'Animal',
  sound: function() {
    console.log('Some generic animal sound');
  }
};

let dog = Object.create(animal);
dog.bark = function() {
  console.log('Woof! Woof!');
};

dog.sound(); // 'Some generic animal sound'
dog.bark(); // 'Woof! Woof!'
console.log(dog.type); // 'Animal'

프로토타입의 사용 사례

프로토타입은 객체 지향 프로그래밍에서 상속을 구현하는 데 사용됩니다. 이를 통해 코드의 재사용성을 높이고, 메모리 사용을 최적화할 수 있습니다.

 

예제

function Shape() {}

Shape.prototype.getArea = function() {
  return 0;
};

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

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

Circle.prototype.getArea = function() {
  return Math.PI * this.radius * this.radius;
};

let myCircle = new Circle(5);
console.log(myCircle.getArea()); // 78.53981633974483

결론

프로토타입은 JavaScript에서 객체가 다른 객체로부터 속성과 메서드를 상속받을 수 있도록 하는 중요한 메커니즘입니다. 이번 글에서는 프로토타입의 기본 개념, 객체의 프로토타입 설정, 프로토타입 상속, 프로토타입 메서드, 프로토타입 속성, 프로토타입 체인과 속성 탐색, 프로토타입의 사용 사례에 대해 배웠습니다. 다음 글에서는 배열 기초에 대해 알아보겠습니다.

다음 글에서 만나요!