3-1. Inheritance Patterns - Subclassing, Prototype Chain
목표
- __proto__, constructor, prototype 이 각각 어떤 관계를 가지고 있는지 조사해봅니다.
- Object.create 메소드에 대해 이해합시다.
- ES6 class 키워드 및 super 키워드 이용 방법을 알아봅니다.
1. 용어 정리
Subclassing
: 부모로부터 상태(constructor)와 행위(method)를 상속받고 자기 자신의 고유 특성도 추가할 수 있는 상속 방법.
Prototype
: 자바스크립트의 모든 객체들은 부모 객체를 가지고, 연결되어 있는데 이 부모 객체가 프로토타입 객체(prototype)입니다.
덕분에, 객체 지향 프로그래밍의 상속 개념처럼 부모 객체의 프로퍼티와 메소드를 사용할 수 있습니다.
마찬가지로, 생성자 함수로 생성된 모든 객체가 프로퍼티, 메소드를 공유할 수 있고, 이로 인해 상속을 구현할 수 있습니다.
__proto__
: 객체를 생성하는 동시에 객체 안에 [[prototype]] 라는 프로퍼티가 생성됩니다. [[prototype]] 의 값은 객체의 __proto__ 라는 프로퍼티에서 접근할 수 있습니다. __proto__는 부모 함수의 prototype을 바라보는데(jordan.__proto__ === Person.prototype) 이 경우 protolink 라 부르기도 합니다. 이 때 객체는 __proto__가 가리키는 부모 객체의 프로퍼티를 사용할 수 있습니다. 이를 활용하여 Prototype chaining 이 가능합니다.
prototype chaining
: 자바스크립트 엔진이 어떤 프로퍼티나 메서드에 접근하려고 할 때 해당 객체에 찾는 프로퍼티나 메서드가 없을경우,
__proto__가 가리키는 링크를 따라 상위(부모) 객체의 프로퍼티나 메서드를 따라 올라가며 찾아보는 것을 의미합니다.
체인의 종점은 Object.prototype입니다.
Constructor
: Constructor는 어떠한 객체를 생성하는 '생성자 함수'입니다. 생성자 함수도 객체이므로 __proto__ 프로퍼티를 가지고 있습니다. 함수의 프로퍼티들은 console.dir(함수 이름)으로 확인할 수 있습니다.
생성자를 사용하면 이름이 같은 메서드와 프로퍼티를 가진 객체를 효율적으로 여러 개 생성할 수 있습니다. 이때 메서드들 생성자의 프로토타입 객체에 추가해 두면 메모리 낭비를 피할 수 있으며 그 메서드를 다른 생성자에게 상속할 수 있습니다.
생성자 함수로 만들어낸 객체는 Instance를 흉내 냅니다. Instance를 흉내 낸 객체는 함수가 아니므로 prototype이 없습니다.
prototype 사용 이유
1. Prototype을 사용하면 공용으로 사용되는 메소드의 변경이 쉽다.
2. Prototype을 사용하면 빠르고 메모리가 효율적입니다.
출처: velog.io/@gtobio11/Javascript-Prototype-methods-vs-Object-methods
2. 자바스크립트로 OOP 구현하기
1) Pseudoclassical Inheritance
john은 고3 학생이다. 밤샘 공부를 하며 수능을 준비하던 존(=john)은 문득
'아.... 나도 사람인데... 동네 친구인 steve 처럼 잠 좀 자면 안될까..?' 라는 터무니 없는 생각을 하게 되었고,
수면의 정당성을 인정 받기 위한 사투를 벌이게 되는데......
뭐가 문제지..? 아직 인간으로 인정을 받지 못했기 때문이다.
Object.create 을 활용하여 모든 학생들을 인간으로 만들어주자.
Object.create 메소드란? 지정된 프로토타입 객체 및 속성을 갖는 새 객체를 만드는 메소드
여기에서, Student.prototype에 Human.prototype 객체를 할당해준다.
하지만 꿀잠을 잔 존은 존이라는 이름을 여전히 인정 받지 못했다.
그리고 학생들은 여전히 학생으로 불려야 했기에, 아래와 같이 constructor에 Student를 할당해주고,
잠은 잘 지라도 학생들은 이름을 가지고 있기에, call을 활용, Human 객체를 this로 지정하여 이름을 넣어준다.
마침내...!! john 은 공부도 하고 잠도 자며 학생의 본분을 다하되 한 사람으로서도 존중받을 수 있게 되었다.
2) ES6 Inheritance
ES6 class 키워드 : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes
프로토타입 더 자세히 공부하기: poiemaweb.com/js-prototype