JavaScript Visualized: 🎉👪 Prototypal Inheritance

reference: https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co

우리가 문자열이나 배열 혹은 객체에서 어떻게 .length, .split(), .join() 같은 내장 메소드를 사용할 수 있었는지 궁금하신 적이 있으셨나요? 우린 이런 것들이 어디에 있는지 명시적으로 지정하지 않죠? “아무도 모르는 JavaScript의 마법입니다 🧚🏻‍♂️” 라고는 하지 말아주세요. 실제로는 이를 프로토타입 상속이라고 부르고, 이건 상당히 대단하며 여러분들이 생각하시는 것보다 훨씬 더 자주 사용합니다!

우린 종종 같은 타입의 객체를 많이 생성하죠. 사람들이 강아지를 검색할 수 있는 웹 사이트가 있다고 해보죠!

모든 강아지를 표현하기 위해 우리는 객체가 필요합니다! 🐕 매번 새로운 객체를 작성하는 대신, new 키워드(이번 포스트에서 생성자 함수를 다루지 않습니다. 너무 길어지거든요)를 사용하여 강아지 인스턴스를 만들 수 있는 생성자 함수 (무슨 생각하실 지 알 것 같아요. ES6 클래스는 나중에 다룰 예정입니다!)를 사용하도록 하겠습니다.

모든 강아지는 이름과, 품종, 색, bark(짖다)라는 함수를 가집니다.

우리가 Dog 생성자 함수를 만들면, 그건 우리가 만든 객체만 있는 건 아닙니다. 자동적으로 추가적인 객체도 생성이 됩니다. 그걸 프로토타입이라고 하죠. 기본적으로 이 프로토타입 객체는 constructor라는 속성을 포함하는데, 이는 원래 생성자 함수에 대한 참조입니다. 이번 경우엔 Dog이죠.

1 || 생성자 함수가 만들어지면 prototype 객체 또한 만들어집니다. 생성자의 prototype은 원래 생성자 함수에 대한 참조를 갖습니다.

Dog 생성자 함수의 prototype 속성은 열거할 수 없습니다. 즉, 이 객체 속성에 접근해보려고 해도 보이지 않습니다. 하지만 여전히 존재합니다!

좋아요..그럼 왜 이런 속성이 있는 걸까요? 먼저 보여줄 강아지를 만들어봅시다. 간단하게 dog1과 dog2라고 할께요. dog1은 Daisy이고, 아주 귀여운 검정 래브라도죠! dog2는 Jack이예요. 겁없는 흰 잭 러셀입니다 😎

dog1을 콘솔에 남겨보고 속성을 열어봅시다!

우리가 추가한 name, breed, color 같은 속성들이 보이고, bark도 있죠. 근데 저 __proto__ 속성은 뭔가요! 열거 할 수 없는 것으로 보통 객체에서 저 속성들을 얻으려고 해도 보이지 않는 걸 말합니다. 한 번 열어보죠! 😃

우와..이건 정확히 Dog.prototype 객체처럼 보이네요! 음 추측해보면, __proto__는 Dog.prototype 객체의 참조인거죠. 이게 프로토타입 상속의 모든 것입니다: 생성자 함수의 모든 인스턴스들은 생성자의 프로토타입에 접근할 수 있습니다! 🤯

*3 || 인스턴스는 proto 라는 속성도 포함하고 있습니다. 이것은 생성자의 프로토타입을 가리킵니다. 이번 예제에선 Dog.prototype입니다.*

그럼 이게 왜 좋을까요? 때때로 모든 인스턴스들이 공유하는 속성이 필요하죠. 예를 들어 이번 예제에선 bark함수가 그렇습니다: 모든 인스턴스에서 동일하죠, 그럼 왜 매번 새로운 강아지를 만들 때 새로운 함수를 만들어야 하나요? 각각 다 메모리를 잡아먹잖아요. 이렇게 하는 대신 우린 이걸 Dog.prototype 객체에 추가할 수 있습니다!

4 || 메모리를 절약하기 위해 모든 인스턴스들이 공유하는 속성에 대해 매번 복사본을 만드는 대신 prototype 속성에 추가할 수 있습니다.

인스턴스에서 어떤 속성에 접근하려 할 때마다 엔진은 가장 먼저 지역적으로 그 객체 자체에 정의된 속성이 있는지 검색하려 합니다. 그러나 만약 그 접근 가능한 속성을 찾지 못할 경우, 엔진은 __proto__ 속성을 통해 프로토타입 체인을 따라 내려갑니다!

5 || 객체의 속성에 접근하려 할 때, 먼저 내부적으로 검색을 한 뒤 proto 속성을 통해 프로토타입 체인을 따라 내려갑니다.

이제 이건 한 단계일 뿐이지만, 몇 단계가 될 수도 있습니다! 계속 따라간다면, 여러분들은 Dog.prototype을 보여주는 __proto__ 객체를 확장했을 때 제가 하나의 속성을 포함하지 않았다는 걸 알게 되실 거예요. Dog.prototype 그 자체도 또한 객체입니다. 즉, 실제로 Object 생성자의 인스턴스라는거죠! 그 말은 Dog.prototype 또한 __proto__ 속성을 갖고 있으며 그것은 Object.prototype을 가리킨다는 겁니다!

마지막으로, 내장 메소드들이 어디에서 오는지에 대한 답을 찾아보죠: 이것 또한 프로토타입 체인입니다! 😃

.toString() 메소드로 예를 들어 보겠습니다. 이것이 dog1 객체에 지역적으로 정의되어 있을까요? 음..아니죠. 그럼 이건 dog1.__proto__가 참조하는 Dog.prototype 객체에 정의되어 있나요? 이것 또한 아니죠! 그럼 Dog.prototype.__proto__가 참조하는 Object.prototype에 정의되어 있나요? 맞습니다! 🙌🏼

6 || 프로토타입 체인은 여러 단계를 가질 수 있습니다. 예를 들어 Dog.prototype 그 자체도 객체이므로 Object.prototype의 내장된 속성들을 상속 받습니다.

지금까지 우리가 사용해돈 생성자 함수(function Dog() { ... })도 여전히 유효한 JavaScript이지만, ES6는 더 쉬운 생성자 함수와 프로토타입을 위한 구문을 도입했습니다: 클래스 입니다!

클래스는 오직 생성자 함수를 위해 만들어진 쉬운 문법입니다. 모든 동작 방식은 기존과 동일합니다!

class 키워드를 통해 클래스를 작성할 수 있습니다. 클래스는 constructor 함수를 가지며, 이는 기본적으로 ES5 문법의 생성자 함수입니다! 프로토타입에 추가하고자한 속성들은 클래스의 바디 영역에 선언됩니다.

7 || ES6는 생성자 함수를 위한 쉬운 문법을 도입했습니다.

클래스의 또 다른 장점은 다른 클래스로의 상속(extend)이 쉽다는 겁니다.

치와와라는 같은 품종의 강아지 몇 마리를 보여주고 싶다고 해보죠! 치와와도 (어떻게든… 😐) 강아지이죠. 예제를 간단하게 유지하기 위해, name, breed, color 대신 이제부터 Dog 클래스에서는 name 속성만 전달된다고 하겠습니다. 그런데 치와와는 약간 특별한 부분이 있는데, 바로 작게 짖는다는거죠. 그래서 Woof! 라고 하는 대신, 치와와는 Small woof! 라고 할 수 있습니다 🐕

확장된 클래스에서는 super 키워드를 사용하여 부모 클래스의 생성자에 접근이 가능합니다. 그리고 부모 클래스의 생성자에서 기대하는 인수를 super에 전달해야 합니다: 이번 예제에선 name 이죠.

myPet은 Chihuahua.prototype과 Dog.prototype 둘 다 접근이 가능합니다 (그리고 자동적으로Dog.prototype이 객체이므로 Object.prototype도 접근이 가능합니다).

8 || ES5 생성자와 동일한 방법으로 클래스에서도 프로토타입 상속이 동작합니다. super 키워드로 확장된 서브클래스도 호출이 가능합니다.

Chihuahua.prototype은 smallBark 함수를 갖고 있고, Dog.prototype은 bark 함수를 갖기 때문에, myPet에서는 smallBark와 bark에 둘 다 접근이 가능합니다!

여러분들도 예상하실 수 있듯, 프로토타입이 영원히 이어지진 않습니다. 객체의 프로토타입은 가장 끝에 null이 됩니다: 이번 예제에선 Object.prototype이 해당되겠네요! 만약 지역적으로 또는 프로토타입 체인에서 찾을 수 없는 속성에 접근하려고 한다면, undefined가 반환될 것입니다.

9 || 확장된 클래스에서 상속받은 메소드를 호출할 수 있습니다. proto가 null일 경우 프로토타입 체인이 종료됩니다.

---

생성자 함수와 클래스에 대한 모든 것들을 설명했지만, Object.create 메소드를 이용하여 프로토타입 객체를 추가하는 방법도 있습니다. 이 메소드를 통해 우린 새로운 객체를 생성하고 그 객체가 가져야할 프로토타입을 정확히 지정할 수 있습니다! 💪🏼

Object.create 메소드에 인자로 만들어진 객체를 전달함으로써 처리하게 되는데요. 해당 객체가 우리가 생성한 객체의 프로토타입이 됩니다!

방금 만든 me 객체를 로그로 남겨보죠.

me 객체에 아무 속성들도 추가하지 않아서, 단순하게 열거할 수 없는 __proto__ 속성만 포함하고 있습니다! __proto__ 속성은 우리가 프로토타입으로 정의한 객체에 대한 참조를 담고 있습니다: person 객체로, name과 age 속성이 있죠. person 객체도 객체이기 때문에, person 객체의 __proto__ 속성은 Object.prototype이 됩니다. (가독성을 위해, gif에 그 프로토타입까지 열진 않았습니다!)

---

JavaScript에서 프로토타입 속성이 왜 가장 중요한 기능인지 이해하셨길 바랍니다! 질문이 있으시다면 언제든 연락주세요! 😊