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

JS의 프로토 타입

• 프로토 타입은 JS와 클래스 기반 객체지향언어와 크게 차이를 주는 부분이다. 프로토타입은 상속과 멤버 함수 추가등에 많이 쓰인다. 각각에 대해서 알아보도록 한다.

1. 생성자 안에서 메서드를 정의하는 방식의 문제점

• JS는 생성자 안에 다음과 같이 모든 메서드를 입력할 수 있다. 하지만, 아주 치명적인 문제가 발생한다. 생성자로 생성한 모든 인스턴스에 똑같은 메서드가 추가된다. 생성한 인스턴스만큼 같은 작업을 하는 메서드가 추가된다 . 메모리가 크게 낭비 된다.

  

2. 프로토 타입 객체

• 프로토타입 객체를 이용하면, 생성자 안에 있는 프로토타입 프로퍼티가 외부에 정의된 객체 하나를 가리킨다. 그리고 그 프로토타입 객체에 prototype키워드로 지정한 함수들을 저장하는 것이다.

• 결국, 인스턴스에서도 그 함수를 가리키게 되는 것이다. 객체가 아무리 많아진다 해도, 함수는 1개만 존재할 뿐이다. (이 구체적인 원리는 밑에서 살펴 볼 것이다. 2번 과정 참고)

(인스턴스의 __ proto __도 생성자 함수의 prototype객체의 멤버인 printCarName을 가리킨다.)

그렇다면 어떠한 원리로 작동하는 것인가?

1. 함수가 생성되면서, 함수는 생성자 자격을 얻게되고, prototype Object를 생성한다. 함수의 prototype프로퍼티를 통해서 prototype Object를 가리킨다.

   • 즉, 함수를 정의하면 생성자 자격을 부여하고 해당 함수의 prototype Object을 생성, 연결한다.

   • constructor자격이 부여되어야 new 키워드를 통해 객체(인스턴스)를 만들 수 있다.

   • __ proto __는 prototype과 다르다. 전자는 모든 객체가 가지고 있지만, 후자는 함수만 가지고 있는 프로퍼티이다.

     • 함수도 객체이기 때문에, __ proto __를 가지고 있다.

   • car1,2,3은 자신이 가진 __ proto __를 이용해서 CarType의 prototype객체를 가리키고 있다.

     

     • 만약, car2인스턴스에서 __ proto __를 이용해서 printCarName을려고 했는데 printCarName이 없다면 CarType의 프로토타입 객체의 상위 객체의 속성을 찾는다. 최상위 객체인 Object까지 검색한다. 찾지 못한다면, undefined를 리턴한다.

     • Object prototype 객체의 constructor은 Object 생성자 함수이고, __ proto __는 null이다. 그 상위의 객체가 없기 때문이다.( 모든 객체는 Object생성자 함수로 부터 생성된다.)

2. 각각의 인스턴스들은 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 가리킨다.

   어떤 방식으로 인스턴스들의 __ proto __가 생성자 함수의 prototype객체를 가리키는지 알아보자.

   1. 빈 객체를 생성한다.

      let newObj = new Object();

   2. CarType.prototype을 생성한 인스턴스의 프로토타입으로 설정한다. 이 과정을 통해서 내부에 있는게 아니라, 외부에 있는 함수를 쓸 수 있는 것이다.

      newObj.__proto__ = CarType.prototype

   3. apply를 통해서 this를 설정해준다.

      CarType.apply(newObj, arguments); //Cartype생성자 함수에 newObj을 this로 하고 해당 생성자 함수에 인수 arguments.

   4. 완성된 인스턴스(객체)를 리턴

• 참고 사진

3. JS의 상속과정

• 프로토타입을 이용해서 상속 구조를 만들 수 있다.

  • 객체 원형의 위임 과정을 통해 상속 과정이 구현된다. 클래스 기반 상속과 다르다는걸 유의해야 한다. 클래스 기반 상속을 비슷하게 흉내내는 것이다.

• __ proto __를 이용해서 프로퍼티를 찾아다닌다.

• contructor는 해당 프로토타입의 생성자 함수를 가리킨다.

• 생성자 함수의 prototype 프로퍼티는 constructor을 가리킨다.

• Student prototype = new Person(22,"KIM"); 을 하는 순간, Student의 프로토타입 객체의 constructor 프로퍼티는 생성자함수 Person을 가리킨다. __ proto __는 Person 프로토타입 객체를 가리킨다.

• CS_student가 age, name을 찾기 위해서, __ proto __를 써서 검색한다.

• 함수 eat을 찾을떄도 마찬가지로, __ proto __를 써서 검색한다.

• 코드를 작성할 때는 age, name, eat, introduce를 다 __ proto __로 접근 할 필요가 없다.

참고

• [오승환님의 블로그]