자바스크립트 프로토타입?

 

자바스크립트는 프로토타입 Prototype이라는 공간을 가지고 있다.

프로토타입은 생성자 함수를 사용해 생성된 객체가 공통으로 가지는 공간을 의미한다.

 

//생성자 함수 만들기
function Student(name, korean, math, english) {
    this.이름 = name;
    this.국어 = korean;
    this.수학 = math;
    this.영어 = english;

    //메서드
    this.getSum = function() {
        return this.국어 + this.수학 + this.영어;
    };

    this.getAverage = function() {
        return this.getSum() / 3;
    };

    this.toString = function() {
        return this.이름 + '\t' + this.getSum() + '\t' + this.getAverage();
    };
}

이런식으로 생성자 함수를 만들었었는데 생성자 함수를 사용해 객체를 만들 때 대부분 생성자 함수 내부에는 속성만 넣고 메서드는 모두 프로토타입 안에 넣는다.

따라서 위 코드는 아래와 같이 작성할 수 있다.

function Student(name, korean, math, english) {
    this.이름 = name;
    this.국어 = korean;
    this.수학 = math;
    this.영어 = english;
}

Student.prototype.getSum = function() {
    return this.국어 + this.수학 + this.영어; 
};

Student.prototype.getAverage = function() { 
    return this.getSum() / 3 
};

Student.prototype.toString = function() { 
    return this.이름 + '\t' + this.getSum() + '\t\t' + this.getAverage(); 
};

var students = [];
students.push(new Student('홍길동', 87, 90, 98));
students.push(new Student('홍길순', 98, 56, 78));

//출력
var output = '이름\t총점\t평균\n';
for (const i in students) {
    output += students[i].toString() + '\n';
}
console.log(output);

출력 결과

 

프로토타입을 사용하면 이미 있는 객체에 추가로 메서드를 제공할 수 있게 된다.

 

 

//부모
function Vella() {
    name = 'vella',
    nationality = 'Korea'
};

//유전자 추가
Vella.prototype.gender = '여성';

//자식
var person = new Vella();

//출력
console.log(person.gender);

프로토타입은 '유전자'와 같다고도 볼 수 있는데 위 코드에서 생성자 함수 Vella는 name과 nationality 속성만 가지고 있는데 prototype으로 gender를 추가해주었다.

그 후 Vella를 이용해 생성된 변수 person은 Vella의 자식과 같아 person이라는 변수는 gender라는 속성을 가지고 있지 않지만 person.gender를 출력해보면 '여성'이라는 출력 결과를 확인할 수 있다.

출력 결과

 

이렇듯 프로토타입은 상속 기능을 구현하는 장치라고 볼 수 있다.

위 코드에서 Vella(부모)가 가지고 있는 name과 nationality라는 키는 person(자식)이 직접 가지게 되지만 프로토타입으로 구현한 gender라는 키는 Vella만 가지고 있을 뿐 person은 끌어다 쓴 것이다.

 

 💡원리?

person.gender가 출력 될 수 있었던 이유, 즉 자식이 부모의 것을 끌어다 쓸 수 있는 동작 원리는 어떻게 될까? 

만약 변수 person이 gender를 직접 가지고 있다면 당연히 값을 출력 시켜준다. 하지만 gender를 가지고 있지 않다면 자바스크립트는 변수 person의 부모 유전자를 찾아 부모가 gender를 가지고 있다면 값을 출력해주게 된다. 부모 유전자에도 없으면 부모의 부모 유전자까지 찾아 동작하게 된다.

 

프로토타입을 이해하고 나면 배열을 선언한 후 sort()나 length() 같은 메서드를 사용할 수 있는 이유를 이해할 수 있게 된다.

var array = new Array(330, 3, 33);
console.log('sort: ' + array.sort());
console.log('length: ' + array.length);

다음과 같은 결과를 얻을 수 있는 이유 말이다!

이것은 Array 생성자 함수에 sort, length가 정의 되어 있기 때문이다. 실제로 Array.prototype을 출력 해보면 확인할 수 있다.

확인~~

 

 

프로토타입을 이용한 유전자 조작으로 다양한 기능을 만들어 볼 수 있을 것이다!

 

 

---

참고

• https://youtu.be/wUgmzvExL_E