[자바스크립트]인스턴스와 프로토타입 예제

JavaScript에서 객체를 생성하는 방법에는 두 가지가 있습니다. 하나는 객체 리터럴을 사용하는 것이고, 다른 하나는 생성자 함수를 사용하는 것입니다.

 

객체 리터럴을 사용하면서 생성된 객체는 프로토타입 객체를 상속받지 않습니다. 하지만 생성자 함수를 사용해서 객체를 생성하면, 생성자 함수의 프로토타입 객체를 상속받아 새로운 객체가 생성됩니다.

이때 생성된 객체를 인스턴스(instance)라고 부릅니다. 인스턴스는 생성자 함수의 프로토타입 객체를 상속받아 새로운 객체를 생성하는 과정에서 생성된 객체입니다. 인스턴스는 생성자 함수로부터 생성된 객체이기 때문에, 생성자 함수에서 정의한 프로퍼티와 메서드를 상속받습니다.

반면, 프로토타입(prototype)은 생성자 함수에서 정의된 프로퍼티와 메서드를 상속받아 인스턴스가 사용할 수 있는 공통의 기능을 제공하는 객체입니다. 프로토타입은 생성자 함수 자체에 속한 객체이며, 생성자 함수를 통해 생성된 모든 객체들이 공유합니다. 따라서 프로토타입 객체에 추가한 프로퍼티나 메서드는 생성자 함수로부터 생성된 모든 객체에서 사용할 수 있습니다.

JavaScript에서는 인스턴스와 프로토타입 객체 간에 프로토타입 체인(prototype chain)이라는 매커니즘을 이용해 상속 관계를 구현합니다. 인스턴스는 프로토타입 체인을 따라 상위 객체의 프로퍼티와 메서드를 사용할 수 있습니다. 이렇게 상속 관계를 이용하면 코드의 재사용성과 유지보수성이 높아집니다.

 

 

 

// 객체 리터럴을 이용한 객체 생성
const person = {
  name: "John",
  age: 30,
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.sayHello(); // "Hello, my name is John." 출력

생성자 함수를 사용해서 객체를 생성하는 예시입니다.

 

 

// 생성자 함수를 이용한 객체 생성
function Person(name, age) {
  this.name = name;
  this.age = age;
}

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

const person1 = new Person("John", 30);
const person2 = new Person("Jane", 25);

person1.sayHello(); // "Hello, my name is John." 출력
person2.sayHello(); // "Hello, my name is Jane." 출력

위 예시에서 person 객체는 객체 리터럴을 이용해 생성되었습니다. Person 생성자 함수는 this 키워드를 이용해 객체의 프로퍼티를 정의하고, Person.prototype 객체를 이용해 공통으로 사용할 프로퍼티와 메서드를 정의했습니다. person1과 person2 객체는 new 키워드를 이용해 Person 생성자 함수를 호출하여 생성되었습니다. 이렇게 생성된 객체는 Person.prototype 객체를 상속받아서, sayHello 메서드를 사용할 수 있습니다.