본문 바로가기
카테고리 없음

자바스크립트 프로토타입(js prototype)

원건우 2020. 3. 25. 16:36

자바스크립트는 프로토타입 기반 객체 지향 언어라고 표현한다. 그렇다면 대체 프로토타입이란 무엇을 말하는걸까? 

먼저 자바스크립트에서 객체를 만드는 두가지 방법을 보자

 

var obj = {};

var object = new  Object();

obj Literal 방법을 객체를 만들어 내는 단축어 이고 object는 생성자를 이용한 방법이다.

기본적으로 두 방법 모두 Object 생성자의 프로토 타입을 상속 받아 생성되었다.

사진에서 보면 obj.__proto__  와 object.__proto__가 같은것을 볼수있다.

Prototype

 

자바스크립트는 클래스라는 개념이 없다 참고로 최근의 ES6 표준에스는 Class문법이 추가되었다. 하지만 문법이 추가 되었다는 것이지, 자바스크립트가 클래스 기반으로 바뀌었다는것은 아니다. 그래서 객체를 복사해서 새로운 객체를 생성하는 프로토타입 기반의 언어이다. 

객체를 생성할때 프로토 타입을 결정된다. 결정된 프로토타입 객체는 다른 임의의 객체로 변경할수 있고 이것을 부모 객체인 프로토 타입을 동적으로 변경할 수 있다는 것을 의미한다. 

이전에 말했듯이 자바스크립트에는 클래스라는 개념이 없다. 그래서 기존의 객체를 복사해서 새로운 객체를 생성하는 프로토타입 기반 언어인 것이다. 이는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어낸다. 이렇게 생성된 객체는 다른 객체의 원형이 될 수 있다. 그렇다면 프로토타입은 언제 사용하게 되는걸까 ? 다음 예제를 살펴보자

function Person(){
	this.hand = 2;
	this.body = 1;
	this.nose = 1;
}

var kim = new Person();
var lee = new Person();
console.log(kim.hand); // 2
console.log(lee.hand); // 2

 

 

kim변수에 값이 할당된것이 보일것이다. kim과 lee는 hand,body,nose 를 공통적으로 가지고 있다. 메모리에는 hand,body,nose가 2개씩 총 6개가 메모리를 할당하게 된다. 지금은 적은 수지만 우리가 복잡한 코딩을 한다고 가정하고 객체를 100개를 만든다면 300개의 변수가 메로리에 할당되게 된다. 이러한 메모리 문제를 프로토타입으로 해결할수 있다

function Person(){}

Person.prototype.hand = 2;
Person.prototype.body = 1;
Person.prototype.nose = 1;

let kim = new Person();
let lee = new Person();

console.log(kim.hand) // 2
console.log(lee.hand) // 2

Person.prototype이라는 빈 Obect가 어딘가에 존재하고, Person이라는 함수로부터 생성된 객체(kim,lee)들은 어딘가에 존재하는 Object에 들어있는 값을 모두 가져다 쓸수 있다. 즉 hand,body,nose를 어딘가에 있는 빈 공간에 넣어놓고 kim과lee가 공유해서 사용하는 것이다.

kim과lee안 객체에 값이 없다. 하지만 __proto__가 부모 인 Person을 reference하고 있으므로 값을 가져다 출력할수 있는 것이다.

프로토타입 체인,최상위는 Object

 

 

Constructor(생성자)

Javascript에서 함수가 정의 될 때, 함수는 기본적으로 Constructor(생성자)가 부여된다. 생성자가 부여된 함수는 new를 통해서 객체를 생성할 수 있게된다. 또한 Prototype Object가 생성되고 이 Object와 함수가 가지고 있는 prototype 속성과 연결이 된다. 따라서, Person.prototype은 어떠한 Prototype Object와 연결이 되어있다. 위의 코드를 살펴봤을때, Person.prototype.hand가 정의 된다면, 이는 어떠한 Prototype Object의 하나의 속성으로 추가가 된다는 뜻이다.

Constructor 자격이 부여되면 new를 통해 객체를 만들어 낼 수 있게 됩니다. 이것이 함수만 new 키워드를 사용할 수 있는 이유이다.

 

객체와 함수의 new 

마치며

오늘은 프로토타입을 이용해 상속, reference방법, 함수에 부여되는 constructor, 프로토타입체인에 대해 알아봤

 

참조 https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

티스토리툴바