[javascript] 상속, 프로토타입(prototype)

안녕하세요 ! 오늘은 자바스크립트에서의 상속, 프로토타입(prototype)에 대하여 알아보도록 하겠습니다. 
 
 
 
자바스크립트에서 객체들은 상속 관계를 가질 수 있습니다. 모든 객체는 자신의 부모 역할을 하는 부모 객체( = 프로토타입 객체) 를 참조할 수 있습니다. 자바스크립트에서는 이 메커니즘을 두고 프로토타입 체인(Prototype Chain)이라고 합니다. 프로토타입 체인이 무엇인지, 메커니즘을 한번 들여다볼까요?
 

프로토타입 체인을 시각화한 모습

 
 
맨 오른쪽에 color와 name 속성만을 가진 x5 객체가 있습니다. 그런데 우리는 x5객체에 뜬금없이 "drive()" 메소드를 호출했다고 가정해 봅시다. 지금까지 배웠던 대로라면, 해당 객체에 없는 메소드를 호출했으므로 아무런 결과도 반환되지 않는 것이 정상입니다. 하지만 사실 자바스크립트는 x5 객체 내에서 해당 메소드를 찾을 수 없는, 이런 상황이라면 포기하지 않고 바로 x5의 부모 객체인 bmw를 찾아가 다시 해당 메소드를 찾아봅니다. 그런데 만일 bmw 객체에서도 해당 메소드를 찾을 수 없다면, bmw 객체의 부모객체인 car에서 또 찾아봅니다. 사진의 맨 왼쪽을 보니 car 객체에 "drive()" 메소드가 있네요. 그렇다면 우리는 x5객체로 "drive()"함수를 호출하는 일이 가능해지게 됩니다. 부모의 부모객체를 참조해서요.
 
이처럼 프로토타입 체인을 따라 올라가면서 부모 객체의 속성과 메소드에 모두 접근할 수 있고, 접근하다가 원하는 속성이나 메소드를 찾았을 때는 이를 반환할 수 있습니다. 
 
 

 
 
위 코드를 보시면 현재 car, lol, bmw 객체 3개가 보입니다. 저는 객체 lol과 bmw가 객체 car을 프로토타입(=부모)로 두고, car을 참조했으면 좋겠어요. 이럴 땐 키워드 "_ _ proto _ _ " 를 활용하여
 
bmw.__proto__=car;
lol.__proto__=car;
 
이렇게 작성해주면 됩니다. "proto" 단어 양 옆에 아랫슬래쉬 두 개씩을 붙여준 모습입니다. 이로서 lol과 bmw는 객체 car을 참조할 수 있게 되므로, console.log(bmw.wheels); 를 통해, bmw에 wheels 속성을 호출하면 car에 있는 wheels값이 반환되어 출력됩니다. 마찬가지로 lol.drive(); 를 통해 lol에 drive 메소드를 호출하면 car에 있는 drive 함수가 실행되어 "drive"가 출력됩니다.
 
모든 객체는 "_ _ proto _ _ " 를 내부속성으로 가지고 있습니다. 따라서 모든 객체는  "_ _ proto _ _ " 를 통해 자신의 프로토타입에 직접적으로 접근하고, 값을 설정할 수 있게 됩니다. 
 

---

 
 
그러나 위와 같이 객체를 프로토타입으로 두는 것보다, 다양한 객체를 만들 수 있는 생성자 함수로 프로토타입 개념을 사용할 때 보다 더 유용할 수 있습니다. 
 

아래의 코드와 같이 "prototype" 키워드를 통해 생성자 함수의 프로토타입에 접근할 수 있습니다. 생성자 함수가 생성한 다양한 객체 인스턴스는 모두 생성자함수의 프로토타입을 참조할 수 있습니다. ***

 
* 주의할 점은 생성자 함수의 프로토타입의 경우,

 
이렇게 모두 하나로 묶어 나타내는 방법은 지양해 주세요. (위험)
그 위 코드처럼 한 줄에 하나의 속성을 추가하는 방식으로 작성해 주시기 바랍니다. 
 
 
 
***
- 객체만 출력해보면, 상속받은 속성은 제외하고 자신의 속성들만 출력합니다.
- 객체 메소드 Object.keys() 혹은 Object.values()를 사용해도 상속받은 속성은 나오지 않고 자신의 속성들만 출력됩니다. 
-  그러나 For ... in 함수를 통해 객체를 순회하면, 상속받은 속성을 포함한 모든 속성이 나옵니다.

 

- instanceof : 해당 객체가 생성자함수의 인스턴스가 맞는지 아닌지 T/F 반환 ( 객체 instanceof 생성자함수 )

- constructor : 생성자가 맞는지 아닌지 T/F 반환

 

 

 

 

***
 

 
 

---

다음 시간에는 클래스에 대해 함께 알아보도록 하겠습니다.
읽어주셔서 감사합니다. 좋은 하루 보내세요 !

---