OOP JS-Prototype

부제: class 문법에 길들여진 몸... 본질을 파악해보자.

JS의 객체 정의 방식

const code = function(name, codingTime) {
  this.name = name;
  this.codingTime = codingTime;
  this.showCoding = function(){
      console.log(this.name + "님, 오늘은 " + this.codingTime + "시간동안 삽질을 하셨네요.")
  }
}

JS 에서 사용자 정의 객체를 생성에는 두 단계가 필요하다.

1. 함수를 작성하여 객체 타입을 정의한다.
2. new 연산자로 객체의 인스턴스를 생성한다.

1번에서 함수가 가지는 이름이 객체의 타입 이 된다. 위의 예제에서 정의한 객체는 code 라는 객체 타입을 가지고있다. 객체의 속성과 이름을 가지고 있는 함수를 constructor 라고 하고 그것과 같이 호출되는 값들을 arguments 라고한다.

객체의 인스턴스를 생성하려면 new 연산자가 필요하다. new 연산자를 활용하여 아래와 같이 객체를 생성하면 된다.

const EamonCodeLern = new code("Eamon","6");

객체가 생성 될 때 JS 에서 벌어지는 일을 살펴보자.

먼저 함수 code 를 선언해주면 prototype 속성을 가진 code 라는 객체와 code 객체의 prototype 객체가 생성된다. code's prototype 객체 안에는 constructor 속성이 있고 이 속성은 code 를 가르킨다. code 안에 있던 prototype 속성은 code's prototype` 객체를 가르킨다.

new 를 선언 하여 새로운 인스턴스를 선언하게 되면, 인스턴스 안에는 __proto__ 가 생성이 되게 된다. __proto__ 은 code's prototype 을 가르키게 된다. 이 규칙은 다른 이름의 새로운 객체를 만들게 되더라도 같은 code's prototype 를 가르키게 되어있다.

객체 인스턴스는 많은 속성들을 가지고있다.




실제로 code.prototype을 살펴보면 constructor를 가르키고 constructorsms code를 가르키고 있다는 것을 볼수 있었다.

EamonCodeLern의 .__proto__ 속성은 code's prototype를 가르킨다.

사실 모든 객체들은 상위 객체를 .__proto__ 속성으로 가르키고 있으며 각 객체들은 .__proto__ 로 최상위 Object 까지 이어져있다. EamonCodeLern 객체도 최상위 Object 까지 이어진 것을 확인 할 수 있었다.

이 두 객체에 똑~ 같이 들어가있는 this.showCoding 함수를 비교해보자.

당연히 다르다. 다른 메모리에 저장되어있으며 this.name에 이미 다른 arguments 들을 저장하고 생성되어 있기 때문이다. - 이미 다른 인스턴스이다.

그러나 같은 내용을 두번이나 생성하는 것은 메모리 낭비이다. 이런 메모리 낭비를 줄이기 위해 prototpye 저장 공간을 공유하는 것이다.

const code = function(name, codingTime) {
  this.name = name;
  this.codingTime = codingTime;
}

code.prototype.showCoding = function(){
      console.log(this.name + "님, 오늘은 " + this.codingTime + "시간동안 삽질을 하셨네요.")
  }

이런식으로 선언하면 code 의 prototype 에 constructor 속성 뿐만아니라 showCoding 속성 또한 들어가 있어서 JSONCodeLern 과 EamonCodeLern 객체 모두 동일한 메서드를 사용할수있다.

ES6 부터는 class 를 이용해서 더 쉬고 간단하게 prototype 패턴을 이용할 수 있지만 Javascript 의 근-본은 proto 임을 잊지말자 class 문법과 prototype 패턴을 비교 분석 해본 글을 다음 글에 써볼까 한다.

참조

생활코딩-prototype vs __proto__