1. 기본 개념
JavaScript 에서는 함수가 생성될 때 자동으로 prototype이라는 속성이 생성됩니다. 이 prototype객체에 정의된 속성이나 메서드는 해당 생성자 함수를 통해 생성된 모든 객체에 상속됩니다.
즉, 새로 만든 객체는 생성자 함수의 프로토타입 객체에 있는 속성이나 메서드를 사용할 수 있습니다.
2. 예시
// 생성자 함수 정의
function Person(name, age){
this.name = name;
this.age = age;
}
// prototype을 통해 메서드 추가
Person.prototype.greet = function(){
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
// 객체 생성
const person1 = new Person("Joon", 26);
const person2 = new Person("Sik", 22);
person1.greet(); // "Hello my name is Joon and I am 26 years old"
person2.greet(); // "Hello my name is Sik and I am 22 years old"이렇게 Person.prototype.greet메서드를 추가하면, Person생성자로 생성된 모든 객체가 greet 메서드를 공유하게 됩니다.
3. prototype 의 역할
애초에 함수를 정의할 때 추가 하지 않고 prototype에 추가 하는 이유는
prototype은 메모리 효율을 높이기 위한 중요한 역할을 합니다. 객체마다 개별적으로 메서드를 저장하는 대신, prototype이 메서드를 저장하고 이를 객체들이 참조하는 방식으로 메모리를 절약할 수 있습니다.
만약, 아래 코드와 같이 생성자 함수 내부에 메서드를 직접 추가한다면
function Person(name, age){
this.name = name;
this.age = age;
this.greet = function(){
console.log(`Hello, my name is ${this.name} I am ${this.age} years old.`);
};
}
const person1 = new Person("Joon", 26);
const person2 = new Person("Sik", 23);
console.log(person1.greet === person2.greet); // falsePerson객체가 생성될 때마다 greet메서드가 매번 새롭게 정의됩니다. 즉, person1과 person2는 동일한 기능을 수행하는 메서드를 각각 따로 메모리에 저장합니다. 이렇게 되면 메모리 낭비가 발생할 수 있습니다.
4. prototype 체인
JavaScript의 모든 객체는 자신의 protype을 통해 다른 객체에 정의된 속성이나 메서드를 상속 받을 수 있습니다. 이 체인을 프로토타입 체인(prototype chain)이라고 부르며, 객체에서 속성을 찾을 때 해당 객체에 없으면 prototype을 따라가며 속성을 찾게 됩니다.
요약
prototype을 사용하면 생성자로 생성된 모든 객체가 동일한 속성이나 메서드를 공유할 수 있음.
99