[JavaScript] prototype 알아보기

안녕하세요! 이번글에는 prototype이라는 개념에 대해 알아보도록 하겠습니다!

prototype 이란?

프로토타입은 객체안에 보이지 않는 숨겨진 곳에 값을 넣어놓고 이 값을 어디서든지 꺼내서 쓸 수 있게끔 해줍니다. 우리가 흔히 개발할때 사용하는 toString, push, sort 등 많은 자바스크립트 메서드가 바로 이 프로토타입 기반으로 내장이 되어있는것입니다.

코드 살펴보기

      function Student(name, age, height) {
        this.name = name;
        this.age = age;
        this.height = height;
        this.sayHi = function () {
          console.log(
            `안녕하세요 저의 이름은 ${name}이고 나이는 ${age} 이며, 키는 ${height}입니다.`
          );
        };
      }

      Student.prototype.gender = "남자";

      let student1 = new Student("홍길동", "22", "181");
      let student2 = new Student("박새로이", "28", "183");
      let student3 = new Student("한지평", "32", "184");

      console.log(student1.gender);
      //남자

Student라는 생성자를 만들고 그 밑에다가 gender라는 prototype 값을 주었습니다. 그결과 console에 student1.gender를 찍어본 결과 남자라는 값이 나오는것을 볼 수 있습니다.

참 신기한일이죠? 분명 Student에 gender라는 키 값이 없는데 student1.gender를 찍으니까 값이 출력이 됩니다.
바로 prototype으로 보이지 않는 곳에 gender의 값을 만들어줬기때문에 접근이 가능한거죠.

자바스크립트에서 키나 메서드에 접근을 할때 순서가 있습니다.
예를들어 student1.gender에 접근할때 이러한 순서로 진행이 됩니다.
1. 해당 객체안에 그 키값(gender)이 있는지 확인을 합니다.
2. 만약 그 키값이 없다면 프로토타입에 gender가 있는지 확인합니다.
3. 만약 그 메서드가 없다면 그 부모의 함수 혹은 생성자에 그 gender 프로토타입이 있는지 확인합니다.
....
계속 이런식으로 부모로 올라가서 탐문을 하고 해당하는 프로토타입 값을 실행시켜주는 것입니다.

저희가 자주쓰는 array를 예를들어서 조금만 더 살펴보겠습니다

      let array = [1, 2, 3, 4, 5];
      let array2 = new Array(1, 2, 3, 4, 5);

우선 이 두가지는 같은 식입니다. 전자의 식대로 개발을 하면 자바스크립트 내부적으로는 후자가 작동된 것처럼 돌아갑니다. 편의성을 위해서 전자 방식으로 많이들 하지만 후자가 정석입니다.
Array의 생성자를 이용하여 배열을 만드는 것이죠.

보통 저희는 배열을 만들때 많은 것을 합니다. 배열 값을 추가하기 위한 push, 정렬하기 위한 sort등 많은 일들을 하죠. 하지만 저희는 push와 sort라는 메서드를 만든적이 없습니다. 자바스크립트 내 자체적으로 Array 생성자안에 push, sort등 많은 prototype이 내장되어있는 것입니다. 때문에 저희가 쉽게 접근하여 사용할 수 있는 것입니다

console.log(Array.prototype.sort)이렇게 찍어보시면 해당 prototype이 있다는 것을 알 수 있습니다.

때문에 개발자들이 많이 참고하는 MDN공식 사이트에 상단에 보면 저런식으로 글제목이 나와있는 것입니다.

감사합니다

---

추가적으로, ES6 이후 버전에서 생성자를 생성하고 그 안에 prototype을 만들수 있고 또 그것을 상속받는 새로운 방식이 도입되었습니다
class, constructor, extends, super 를 이용한 방법인데요.
바로 코드 살펴보겠습니다

코드 살펴보기

      class 할아버지 {
        constructor(firstName, age) {
          (this.lastName = "신"), (this.firstName = firstName);
          this.age = age;
        }
        sayHi() {
          console.log(
            `제 이름은 ${this.lastName}${this.firstName} 이고 나이는 ${this.age}입니다`
          );
        }
      }

      class 아빠 extends 할아버지 {
        constructor(firstName, age) {
          super(firstName, age);
        }
      }

      class 아들 extends 아빠 {
        constructor(firstName, age) {
          super(firstName, age);
        }
      }

      let 할아버지1 = new 할아버지("그랜파", "81");
      let 아빠1 = new 아빠("파더", "55");
      let 아들1 = new 아들("썬", "28");
      
      //프로토타입 sayHi 출력
      console.log(할아버지1.sayHi());
      //제 이름은 신그랜파 이고 나이는 81입니다

      console.log(아빠1.sayHi());
      //제 이름은 신파더 이고 나이는 55입니다

      console.log(아들1.sayHi());
      //제 이름은 신썬 이고 나이는 28입니다
      

1. 우선 class를 선언하고 생성자 이름을 정해줍니다.
2. 그안에 constructor(매개변수) {} 형태로 원하는 값들을 넣어줍니다.
3. constructor 바깥에서 prototype을 만들어줄 수 있습니다.
4. 상속받고 싶은 생성자를 class 생성자이름 형태로 추가 생성하고 extends에 상속을 해줄 생성자명을 입력해줍니다.
5. 위 생성자 만든 방식으로 똑같이 constructor(매개변수) {} 형태로 또 작성해줍니다
6. super(매개변수) 를 추가하여줍니다. 여기서 super는 부모의 오브젝트 자료값들을 그대로 옮겨주는 것입니다. 위 코드에서는 (this.lastName = "신"), (this.firstName = firstName);
   this.age = age; 이것이 그대로 자식 생성자에도 들어가게끔 해주는 것이지요.
7. 원하는 결과 값이 나왔나 console.log에 찍어봅니다.

참고자료

https://poiemaweb.com/js-prototype