[Javascript] 프로토타입(Prototype), 그래서 왜 쓰는데?

[Javascript] 프로토타입(Prototype), 그래서 왜 쓰는데?

 

Prototype

프로토타입은 직역하자면 원형이다.

자바스크립트는 이 프로토타입을 이용하여 새로운 객체를 만들어낸다.

자바스크립트에서 객체의 property을 상속할 때 두 가지 방법이 있다.

 

1. this.q = 'strike'와 같이 직접적으로 객체 내에 속성을 정의하는 방법
2. prototype을 이용하여 정의하는 방법

즉, prototype은 부모 객체의 속성을 상속받는 방법 중 하나이며, '유전자'에 비유할 수 있다.

키가 큰 것(직접 정의)과 키 큰 유전자를 가진게(prototype) 다른것과 비슷한 느낌.

 

 

 

그렇다면 Prototype을 굳이 쓰는 이유는??

1) 생성자 함수를 통해 새로운 객체가 생성되면 객체 내의 property와 method가 매번 새롭게 생성된다. 이는 메모리 낭비로 이어진다. 반면 prototype을 쓰면 부모 객체 생성시 한 번만 생성되게 되어 메모리를 절약 할 수 있다.

 

2) 생성자 함수 내에 property나 method를 함수 밖에서 수정할 수 없다. 하지만 prototype을 이용한다면 외부에서 수정이 가능하다.

 

3) 바로 특정 property를 부모 객체에'만' 갖게 할 수 있기 때문이다.

자식은 그 property를 갖고 있지 않지만, 여전히 부모 객체가 갖고 있는 prototype의 property를 쓸 수 있다.

반면 객체 내 property를 직접 정의하면 부모뿐만 아니라 자식 객체에서도 같은 property를 갖게 된다.

 

 

funciton 기계(){
    this.q = 'strike';
    this.w = 'snowball';
}

기계.prototype.name = 'kim'

var nunu = new 기계()

 

 

 

Object에서 속성을 참조할 때 일어나는 순서

1. 직접 속성을 가지고 있으면 그걸 참조
2. 없으면 부모 prototype(유전자)를 참조
3. 또 없으면 부모의 부모 prototype 참조(재귀, prototype chain)

아래를 보면  Person이 부모 객체, kim이 자식 객체이다. 부모 객체와 자식 객체에 sum이 각각 다르게 정의되어있을 때, 자바스크립트는 자식 객체인 kim의 sum()을 먼저 참조하여 출력하는 모습을 볼 수 있다.

 

 

 

특정 생성자 함수의 prototype에만 기능을 추가하는 예

function Person(name){
	this.name = name;
}
Person.prototype.name=null;
Person.prototype.introduce = function(){
	return 'My name is ' + this.name;
}

function Programmer(name){
	this.name = name;
}
Programmer.prototype = new Person(); // Person을 Programmer의 prototype에 상속 받음
Programmer.prototype.coding = function(){  // 기능 추가
	return "hello world";
}

var p1 = new Programmer('Dean');
console.log(p1.introduce() + "<br />");
console.log(p1.coding()+ "<br />");

 

 

배열에서 prototype의 예

아래 배열을 만드는 방법 2가지는 완전히 같은 방법이다.

첫 번째 방법이 인간에게 친숙한 표현이고

컴퓨터는 첫 번째를 두 번째로 만들어 배열을 만든다

new Array는 Array라는 생성자 함수를 통해 객체를 생성하는 방법이다.

즉, 어레이는 Array라는 부모 객체를 상속받는다.

어레이.sort()와 같은 기능을 사용할 수 있는 이유는 바로 Array라는 객체의 prototype에 sort(), length와 같은 것들이 포함되어 있기 때문이다.

진짜 대박이네 이거...

 

var 어레이 = [4,2,1]; // 1
var 어레이 = new Array(4,2,1); // 2
어레이.sort()

 

 

모든 array 자료에서 쓸 수 있는 함수 추가

아래와 같이 Array 객체의 prototype에 특정 함수를 추가하면 모든 배열에서 .length나 .sort()처럼 이 함수를 사용할 수 있다!!!!!

와... 스고이

Array.prototype.함수 = function(){
	alert('hihi');
}

 

 

 

참조 :

https://www.youtube.com/watch?v=wUgmzvExL_E 

https://www.youtube.com/watch?v=vEzvWIJDLCA&list=PLuHgQVnccGMA4uSig3hCjl7wTDeyIeZVU&index=87 

Special thanks to 갓 '코딩애플'