🎈프로토타입(Prototype)의 개념
프로토타입의 정의
프로토타입(Prototype)은 자바스크립트에서 객체 간 상속을 구현하는데 사용되는 객체입니다.
모든 객체는 다른 객체를 기반으로 생성되며, 프로토타입을 통해 생성된 객체는 원본 객체의 속성과 메서드를 상속받게 됩니다.
프로토타입의 역할
프로토타입은 객체의 부모와 같은 역할을 합니다. 새로운 객체를 만들 때, 그 객체는 프로토타입을 통해 다른 객체의 기능을 물려받고, 이후에 추가적인 기능을 확장할 수 있게 됩니다.
프로토타입의 장점
프로토타입은 메모리 절약과 상속을 통한 코드 재사용성, 유지보수성을 높여주며, 동적인 언어로서 자바스크립트의 강력한 기능을 활용하는 데 도움을 줍니다
-
메모리 절약
: 프로토타입 체인을 통해 객체들이 상속 관계를 가지므로, 각 객체가 동일한 메서드를 개별적으로 저장할 필요가 없어 메모리를 절약합니다. -
코드 재사용성
: 프로토타입을 활용하여 객체들 간에 공통된 속성과 메서드를 공유함으로써 코드를 재사용하고 중복을 피할 수 있습니다. -
코드 구조의 단순화
: 상속을 프로토타입으로 구현하면 코드의 구조가 단순해지고 유지보수가 용이해집니다. -
런타임 확장성
: 프로토타입을 동적으로 수정하거나 새로운 메서드를 추가함으로써 객체들의 기능을 런타임에서 쉽게 확장할 수 있습니다.
🧑🤝👩프로토타입 사용하기
1. 객체 생성자 함수 정의하기
동작 원리:
Person생성자 함수를 정의한다. 이 생성자 함수는name과age를 인자로 받아this를 이용하여 객체의 프로퍼티를 초기화한다.
Person이라는 객체 생성자 함수를 정의합니다. 이 함수는 이름(name)과 나이(age)를 인자로 받아 this를 통해 속성을 설정합니다.
function Person(name, age) {
this.name = name;
this.age = age;
}2. 객체의 메서드를 프로토타입으로 추가
동작 원리:
Person.prototype객체에sayHello메서드를 추가한다. 이 메서드는this.name과this.age를 사용하여 각 객체의 정보를 출력한다.Person생성자로 생성된 객체들은 이 프로토타입의 메서드를 공유한다.
Person 객체의 메서드를 프로토타입으로 추가합니다. Person.prototype 객체에 sayHello라는 메서드를 정의합니다.
Person.prototype.sayHello = function() {
console.log(`안녕하세요, 저의 이름은 ${this.name}이고, 나이는 ${this.age}살입니다.`);
};3. 객체 생성하기
동작 원리:
new키워드를 사용하여Person생성자로부터 두 개의 새로운 객체person1과person2를 생성한다. 각 객체는name과age프로퍼티를 가지고 있다.
이제 새로운 객체를 생성합니다. new 키워드를 사용하여 Person 객체를 인스턴스화합니다.
const person1 = new Person('Yejin', 17);
const person2 = new Person('Yebin', 16);4. 프로토타입 탐색
동작 원리:
person1.sayHello()를 호출하면sayHello()메서드를 찾기 위해 먼저person1객체 자체에서 찾고, 없다면Person.prototype을 탐색하여 해당 메서드를 실행한다. 마찬가지로person2.sayHello()도 같은 방식으로 실행된다.
5. 상속 후 결과 확인
동작 원리: 결과적으로,
person1과person2객체는Person.prototype에 정의된sayHello()메서드를 상속받아 사용하게 되므로, 각 객체의 정보를 출력하는 데에 이 메서드를 공유적으로 사용한다.
생성된 객체들은 Person의 프로토타입으로부터 sayHello() 메서드를 상속받게 됩니다. 이제 sayHello() 메서드를 호출하여 결과를 확인합니다.
person1.sayHello();
// 출력: 안녕하세요, 저의 이름은 Yejin이고, 나이는 17살입니다.
person2.sayHello();
// 출력: 안녕하세요, 저의 이름은 Yebin이고, 나이는 16살입니다.⭐프로토타입 요약
-
자바스크립트의 객체들은 프로토타입을 통해 다른 객체로부터 상속받을 수 있습니다.
-
프로토타입은 객체들이 공유하는 속성과 메서드를 정의하는 객체로, 코드 재사용과 메모리 효율성을 촉진합니다.
