[javascript] 프로토 타입(prototype)

1. Prototype이란?

자바스크립트의 모든 객체는 부모 객체와 연결되어 있습니다. 최상위 객체는 Object 객체이며, 해당 객체의 모든 메소드를 상속받습니다. 이 때 부모 객체를 가리켜 Prototype 객체라고 합니다.

 2. Prototype을 사용하는 이유

1) 생성자 함수로 생성된 객체에 공통 변수와 메소드를 공유할 수 있습니다.
2) 상속을 구현할 수 있습니다.

3. __proto__

__proto__ 는 prototype 객체를 가리키는 프로퍼티입니다. 모든 객체가 이 프로퍼티를 가지고 있습니다.

prototype 객체는 다음과 같은 데이터를 저장하고 있습니다.

1) constructor
   생성자 함수에 대한 데이터를 저장하는 객체입니다.
2) 공통 메소드와 공통 변수
    해당 프로토타입으로 생성된 객체들은 공통 메소드와 공통 변수에 접근할 수 있습니다.
3) __proto__
   상위 프로토타입을 가리킵니다 (prototype link)

    function Person(n) {
        this.name = n;
    }

    Person.prototype.getName = function () {
        return `My name is ${this.name}`;
    };

    var person = new Person("kim");


    console.log(person);
    console.log(person.getName());

Person 객체를 선언하고, 생성자 함수 호출 시 this.name을 매개변수 n으로 초기화합니다.
그리고 Person.prototype에 getName 공통 메소드를 선언했습니다. 공통 메소드를 선언하면 Person 생성자 함수로 생성된 객체들은 모두 getName 메소드에 접근할 수 있습니다. 

person 변수에 Person 생성자 함수를 호출하면 새로운 Person객체가 생성됩니다.  
console.log의 출력 결과는 다음과 같습니다.

Person 생성자 함수를 통해 생성한 객체의 정보입니다. name과 __proto__가 저장되어 있는 것을 알 수 있습니다. 
그리고 __proto__에는 공통 메소드인 getName()과 constructor 그리고 __proto__가 저장되어있습니다.
__proto__는 모든 객체의 상위 객체인 Object 프로퍼티를 가리킵니다.

4. prototype chain

객체의 프로퍼티에 접근하려면 객체.프로퍼티이름으로 접근할 수 있습니다. 그런데 해당 프로퍼티가 없으면 부모 객체의 프로퍼티를 참조합니다. 부모의 프로퍼티를 참조한다는 것은 객체의 __proto__를 참조해서 해당 프로퍼티가 있는지 확인하고 없으면 상위 __proto__를 참조합니다. 이것을 prototype chain이라고 합니다. 

prototype chain의 종점은 Object.prototype 입니다. 만약 여기에도 찾고자하는 프로퍼티가 없다면 오류를 발생시킵니다.

 

5. 객체 상속

자바스크립트에서 상속을 구현하려면 prototype 객체를 이용해야 합니다.

    function Person(n) {
        this.name = n;
    }

    Person.prototype.getName = function () {
        return `My name is ${this.name}`;
    };

    function Student(n, i) {
        this.name = n;
        this.id = i;
    }

    Student.prototype = new Person(); //Person 객체 상속
    Student.prototype.constructor = Student; // 생성자 함수는 Student함수를 가리킨다.
    Student.prototype.getInfo = function () {
        return `${this.getName()} and My id is ${this.id}`;
    };

    var student = new Student("lee", "st1111");
    var student2 = new Student("park", "st1112");

    console.log(student);
    console.log(student.getInfo());
    console.log(student2.getInfo());

 

Student에 Person을 상속하려면 Student.prototype에 Person 생성자 함수를 통해 객체를 상속 받습니다.
그리고 생성자 함수를 다시 지정해주어야 합니다.