04-3. 프로토 타입

프로토타입 (Prototype)

1. 프로토타입이란?

• 프로토타입이라는 단어는 시제품을 의미하며, 자바스크립트에서는 객체의 시제품 정도로 이해하면 됩니다.
• 자바스크립트에서 함수를 선언하면 자동으로 그 함수의 프로토타입 객체가 생성됩니다.
• 함수가 객체를 생성하기 위한 모형 역할을 하며, 이때 생성된 객체가 프로토타입을 기반으로 만들어집니다.

프로토타입이란?
프로토타입은 객체들이 공통적으로 사용할 수 있는 속성과 메서드를 정의하는 공간입니다. 객체를 만들 때마다 그 객체들은 이 설계도를 보고 공통된 기능을 사용할 수 있습니다. 그래서 프로토타입은 모든 객체가 공유할 수 있는
공통 자원이라고 볼 수 있습니다.

2. 프로토타입과 생성자 함수

• 생성자 함수에서 객체를 생성할 때, **프로토타입 객체의 constructor**가 자동으로 사용되어 객체가 생성됩니다.

예를 들어, User라는 생성자 함수가 있다면, new User()로 객체를 생성할 때 내부적으로 User.prototype.constructor가 호출됩니다.

 

3. 어떻게 동작하나요?
함수를 통해 객체를 만들면, 그 함수에는 자동으로 프로토타입 객체가 생성됩니다. 이 프로토타입 객체에는 constructor라는 속성이 있는데, 이 속성을 통해 생성된 객체가 어떤 설계도를 따랐는지 알 수 있습니다. 또한, 프로토타입에는 공통적으로 사용할 속성이나 메서드를 추가할 수 있으며, 객체들은 이를 공유하여 사용할 수 있습니다.

3. 프로토타입을 통한 멤버 공유

• 프로토타입 객체는 생성자 함수로 생성된 객체들끼리 공유할 수 있는 멤버를 제공할 수 있습니다.
• **함수명.prototype.멤버명**으로 프로토타입에 멤버를 추가할 수 있으며, 이렇게 등록된 멤버는 생성된 객체들끼리 공유됩니다.

예시

javascript

코드 복사

function User(name) { this.name = name; // this를 사용하여 개별 객체마다 다른 name을 가짐 } User.prototype.greet = function() { // 프로토타입에 공통 함수 등록 return `Hello, ${this.name}`; }; let user1 = new User('Alice'); let user2 = new User('Bob'); console.log(user1.greet()); // "Hello, Alice" console.log(user2.greet()); // "Hello, Bob"

 

 

4. 프로토타입과 객체의 관계
객체가 생성될 때, 그 객체는 자신만의 속성(예: 이름, 나이)을 가질 수 있지만, 추가로 프로토타입에 정의된 속성과 메서드도 함께 사용할 수 있습니다. 만약 객체에 없는 속성이나 메서드를 찾으면 자바스크립트는 프로토타입에서 먼저 찾아보는 방식으로 동작합니다.
이런 식으로 프로토타입은 객체들 간의 공통된 기능을 정의하고 메모리 효율성을 높이기 위해 사용됩니다.

---

4. 프로토타입과 this의 차이

• this는 객체가 생성될 때마다 개별 객체에 따라 다른 값을 유지합니다. 즉, 각 객체마다 별도로 메모리가 할당됩니다.
• 반면, 프로토타입은 여러 객체들끼리 동일한 데이터를 공유하며, 프로토타입에 선언된 멤버는 모든 객체가 동일하게 참조합니다.

5. this와 프로토타입의 우선순위

• 객체에서 멤버에 접근할 때, 먼저 this에 선언된 멤버를 찾습니다. 만약 해당 멤버가 없으면, 프로토타입을 참조합니다.
• 동일한 이름의 멤버가 this와 프로토타입에 둘 다 있을 경우, this에 선언된 멤버가 우선 사용됩니다.

예시

javascript

코드 복사

function User(name) { this.name = name; this.greet = function() { return `Hi, ${this.name}`; }; } User.prototype.greet = function() { return `Hello, ${this.name}`; }; let user1 = new User('Alice'); console.log(user1.greet()); // "Hi, Alice" (this의 greet 사용)

 

---

 

왜 프로토타입을 사용하나요?
프로토타입을 사용하면 효율적입니다. 만약 같은 기능을 가진 객체를 여러 개 만들어야 할 때, 그 기능을 매번 새로 만들 필요 없이 프로토타입에 정의된 기능을 공유할 수 있습니다. 예를 들어, 수백 개의 자동차를 만들 때, 각각의 자동차에 엔진을 따로 만들지 않고 하나의 엔진 설계도를 공유해서 사용한다는 개념과 같습니다.

6. 메모리 효율성

• 동일한 기능을 하는 함수를 this에 선언하면, 객체마다 별도의 메모리를 차지하게 됩니다.
• 반면, 프로토타입에 선언된 함수는 모든 객체가 하나의 함수를 공유하므로 메모리 효율성이 높아집니다.

예시

javascript

코드 복사

function User(name) { this.name = name; this.sayHello = function() { // 각 객체에 동일한 함수가 생성됨 return `Hello, ${this.name}`; }; } // 메모리 효율적으로 하기 위해 프로토타입에 등록 User.prototype.sayHello = function() { return `Hello, ${this.name}`; };

7. 프로토타입을 이용한 상속

• 자바스크립트에서 상속은 프로토타입을 통해 구현할 수 있습니다.
• 하위 객체가 상위 객체의 멤버를 프로토타입으로 이어받아 사용할 수 있습니다.

예시

javascript

코드 복사

function Animal(name) { this.name = name; } Animal.prototype.speak = function() { return `${this.name} makes a sound.`; }; function Dog(name, breed) { Animal.call(this, name); // 상위 생성자 호출 this.breed = breed; } // 상위 프로토타입을 하위 프로토타입으로 설정 Dog.prototype = Object.create(Animal.prototype); Dog.prototype.constructor = Dog; Dog.prototype.bark = function() { return `${this.name} barks.`; }; let dog = new Dog('Buddy', 'Labrador'); console.log(dog.speak()); // "Buddy makes a sound." (상위 클래스의 메서드 사용) console.log(dog.bark()); // "Buddy barks." (하위 클래스의 메서드 사용)

---

요약

1. 프로토타입은 객체의 시제품 같은 역할을 하며, 자바스크립트에서 함수가 선언되면 자동으로 생성됩니다.
2. this는 각 객체별로 독립된 값을 가지며, 프로토타입은 객체들끼리 공유하는 멤버를 제공합니다.
3. 프로토타입을 통해 메모리 효율성을 높일 수 있으며, 여러 객체가 동일한 메서드를 공유할 수 있습니다.
4. 상속은 프로토타입을 통해 구현되며, 상위 객체의 프로토타입을 하위 객체로 전달하여 코드 재사용성을 높일 수 있습니다.