Prototype

JavaScript에서 객체지향 프로그래밍(OOP)에서 사용되는 중요한 속성이다.

 

객체지향 프로그래밍 이라는 부분에 집중해보자.

 

JS에는 타언어들 처럼 클래스를 이용한 상속이 존재하지 않는다.

 

기존 상속 방식

function Test() {
  this.name = "배병일";
  this.age = 23;
}
  
const bae = new Test();
  
console.log(bae.name) // => "배병일"

JS에서 함수와 new 생성자를 통해 상속기능을 흉내내고 있다.

 

이 방식의 문제점은 bae라는 변수에 부모 Test함수가 복사된다는 점이다.

 

function Test() {
  this.name = "배병일";
  this.age = 23;
}
  
const bae = new Test();
const T1 = new Test();
const T2 = new Test();
  
console.log(bae.name) // => "배병일"
console.log(T1.name) // => "배병일"
console.log(T2.name) // => "배병일"

Test함수를 여러곳에서 가져다 쓸 경우 Test함수가 여러곳에 복사된다.

 

필요에 따라 다르겠지만 같은 함수가 복사된다는 건 비효율적이다.

 

Prototype 사용

function Test() {}

Test.prototype.name = "배병일";
Test.prototype.age = 23;
  
const bae = new Test();
  
console.log(bae.name) // => "배병일"

Prototype을 사용하여 name 과 age를 생성해줬다.

 

이해하기 위해서 조금 더 알아볼 필요가 있다.

 

먼저 Test라는 함수에 prototype이라는 걸 생성해준 적이 없는데

 

Test.prototype.name 이라는 형태로 prototype에 name을 생성해주고 있다.

 

JS에서 prototype은 함수가 생성될 때

 

자동적으로 생기는 공간이라고 생각하면 된다.

 

본인은 이해하기 쉽게 유전자라고 한다.

 

const Test = [3, 2, 1]

console.log(Test.sort())

sort()를 쓸 경우 기본적으로 오름차순으로 정렬된다는 건 인지하고 있다.

 

우리는 "Test에 sort()를 넣어주거나 생성해준 적이 없는데 어떻게 동작하지?"

 

라는 생각을 해야 한다.

 

1. const Test = [3, 2, 1]

2. const Test = new Array(3, 2, 1)

우리는 1번 방식으로 생성하지만 결국 컴퓨터는 2번 방식으로 인식하여 생성된다.

 

즉, Array를 참고로 복사된다.

 

const Test = [3, 2, 1]

Array.prototype.t1 = "배병일"

console.log(Test.t1) // => "배병일"

Array.prototype에 t1을 "배병일"로 생성해줬고,

 

Test에서도 t1이 사용가능한 걸 확인할 수 있다.

 

Prototype Chain

prototype을 사용할 경우

 

복사되지 않고 부모의 prototype을 사용한다고 이해했다.

 

만약 부모의 prototype에서 찾지 못할 경우

 

부모의 부모까지 계속해서 찾는다.

 

이렇게 최상위 객체의 prototype까지 접근하는 방식을

 

프로토타입 체인(Prototype Chain) 이라고 한다.