[JavaScript] Chapter 16. Prototype(프로토타입)

생성자 (constructor function)

• 객체 생성하는 함수
• 함수명 첫글자 대문자
• new 키워드 사용하여 호출
• this 키워드 이용

변수타입 변수명 = new 생성자함수();

// 생성자 함수 예
var arr = new Array("사과", "수박", "딸기");
var num = new Number(1, 2);
var info1 = new Info("홍길원", 30);

 

생성자 사용 이유

1.  번거로움 해결
   •  구조를 정해놔서 편리
2.  생성자 하나로 여러 객체 생성 가능
   • 메모리 효율

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

var info1 = new Info("홍길원", 30);
var info2 = new Info("홍길투", 30);
var info3 = new Info("홍길삼", 30);

 

---

 

프로토타입 (prototype)

• 객체의 원래 상태
• 같은 생성자로부터 생성된 객체는 프로토타입을 공유 => 메모리 절약

 

프로토타입 이란?

1. 자바스크립트 내에 존재하는 생성자 함수는 암시적으로 프로토타입 존재 ex) Array()
2. 직접 생성한 생성자함수에서 만든 함수를 공통으로 사용할 경우, 명시적으로 프로토타입 생성해야 됨 ex) Info()

 

프로토타입 예제 - Array

// Array 생성자 함수
var arr = new Array("사과", "바나나", "수박");
console.log(arr);

 

__proto__ 란?

• prototype 확인 용도
• 모든 객체 지님

 

같은 생성자는 프로토타입을 공유한다. 그래서 메모리 절약된다.

 

프로토타입 예제 - 생성

< 프로토타입 전 >

 

프로토타입은 암시적으로 만들어지지 않기 때문에, 명시적으로 만들어줘야 한다.

name과 age는 각각 다른 값들이기 때문에 메모리를 각자 할당해야 하지만, write 함수는 동일하기 때문에 하나의 메모리를 공유하는게 메모리에 효율적이여서 프로토타입을 생성해야한다.

< 프로토타입 후 >

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

// 프로토타입 생성
// 생성자함수이름.prototype.함수이름
Info.prototype.write = function(){
    console.log(this.name + this.age);
}

var info1 = new Info("홍길원", 30);
var info2 = new Info("홍길투", 30);
var info3 = new Info("홍길삼", 30);

info1.write();
info2.write();
info3.write();