JavaScript(JS) - Prototype

조성주·2023년 3월 13일

JavaScript

목록 보기

13/21

✅ Prototype(프로토타입) 란?

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

❓ 같은 생성자로부터 생성된 객체는 프로토타입을 공유한다?

우리는 작업을 하면서 적으면 한 개, 많으면 몇십개의 배열, 객체 등을 생성을 한다. 이렇게 객체를 생성하게 되면 우리는 메서드들로 객체 접근, 조작을 할 수 있게 되는데 이 접근, 조작할 수 있는 메서드들을 생성하게 된다면 너무 많은 메모리 공간을 차지하게 될 것이다. 따라서, 생성자함수에 프로토타입으로 함수를 만들어 공유를 한다.

1) 자바스크립트 내에 존재하는 생성자 함수는 암시적으로 프로토타입이 존재한다. ex) Array

직접 코드를 작성하여 개발자 도구로 확인을 해보자 !

배열 생성자 함수로 배열을 생성을 하면 아래와 같이 생성할 수 있다.

const arr = new Array("하나", "둘", "셋");
const arr2 = new Array("넷", "다섯", "여섯");

console.log(arr);
console.log(arr2);

개발자 도구로 만든 배열 arr과 arr2를 확인해보면 배열의 요소들과 prototype을 확인할 수 있다. prototype을 확인했을 때 우리는 배열에 접근할 때 사용하는 indexOf, lastIndexOf 등 배열 관련 메소드들을 확인할 수 있다. 생성자 함수로 배열을 생성했을 때 암시적으로 이 메서드들이 프로토타입으로 만들어져 있는 것을 확인할 수 있고 프로토타입을 공유하여 사용할 수 있는 메서드들이 동일하다는 것을 알 수 있다.

2) 직접 생성한 생성자 함수에서 만든 함수를 공통으로 사용할 경우 명시적으로 프로토타입을 생성해야한다.

Array, Object, String 등은 이미 만들어져 있는 생성자 함수이기 때문에 프로토타입이 있지만 우리가 직접 생성한 생성자 함수는 프로토타입이 존재하지 않는다.

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

const info = new Info("덩두", 27);

직접 만든 생성자 Info 함수로 info라는 객체를 만들었다. 그 후 console.log로 info를 확인해보면

값은 잘 들어갔고 프로톹타입을 확인하면 아무것도 없는것을 확인할 수 있다. 따라서 직접 생성자 함수를 생성하면 프로토타입을 생성해야한다.

📗 프로토타입 생성 방법


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

const info = new Info("덩두", 27);

// 프로토타입 생성
Info.prototype.getName = function () {
	return this.name;
}

Info.prototype.getAge = function () {
	return this.age;
}

getName과 age라는 프로토타입을 생성하여 확인해보면 프로토타입이 제대로 생성된 것을 확인할 수 있다.

그러면 이렇게 만든 프로토타입을 한번 사용해보자.

// name 값 가져오기
console.log(info.getName());

// age 값 가져오기
console.log(info.getAge());

이렇게 프로토타입을 생성 후 사용하여 값을 제대로 출력하는 것을 확인할 수 있다.

❓ * proto* 는 무엇일까?

__proto__는 객체가 생성되었을 때 그 생성된 생성자 함수의 prototype을 가르키는 링크를 갖는다.

처음에는 무슨소리인지 잘 이해가 안갔지만 다시 살펴보면 다음과 같다.


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

// 프로토타입 생성
Info.prototype.getName = function () {
	return this.name;
}

Info.prototype.getAge = function () {
	return this.age;
}

const info = new Info("덩두", 27);