🔖 객체지향3. prototype의 특징

1. prototype은 constructor 함수에만 생성된다.

위 사진처럼 우리가 일반적으로 만드는 array나 object에는 prototype이 없다.

 

그럼 일반 object 같은걸 상속하고 싶으면 어떻게 하는가??

- constructor 함수를 만들기

- Object.create() 사용

- class 사용

 

 

 

2. 내 부모 유전자를 찾고 싶다면 __proto__를 출력해보면 된다. 

부모로부터 생성된 자식 object들은 __proto__라는 속성이 있다.

이걸 출력해보면 부모의 prototype이 출력된다.

그래서 __proto__는 부모의 prototype과 같은 의미이다. 

 

function Student(){
  this.name = '강동욱';
  this.age = 15;
}
var 학생1 = new Student();

console.log(학생1.__proto__); // {constructor: ƒ}
console.log(Student.prototype); // {constructor: ƒ}

각각 출력해보면 똑같은게 나온다.

결론은 __proto__은 부모 prototype을 의미한다.

 

 

 

3. __proto__를 직접 등록하면 object끼리 상속기능을 구현가능하다.

__proto__는 부모의 prototype을 의미한다 라고 했다.

 

그럼 어떤 object에다가 __proto__를 강제로 하나 설정해버리면 어떻게 될까??

► 설정한 객체가 부모가 된다.

 

let 부모 = { name : '강동욱' };
let 자식 = {};

자식.__proto__ = 부모;
console.log(자식.name); // 강동욱

지금 부모와 자식 object를 하나씩 만들었다. 

그리고 자식의 __proto__에 부모를 집어넣었다. 

그럼 자식의 부모 유전자는 { name : '강동욱' } 이라는 오브젝트가 되는 것이다.

그렇게 되면 자식은 이제 자식.name 속성을 자유롭게 사용할 수 있다. 

 

상속기능 구현을 이렇게도 할 수 있다.

 

 

 

4. 실은 콘솔창에 prototype 정보들이 항상 출력된다.

개발자도구 콘솔창에서 아래 코드를 복붙하고 학생1을 처봐라.

function Student(){
  this.name = '강동욱';
  this.age = 15;
}
Student.prototype.gender = '남자';

var 학생1 = new Student();

▲ [[Prototype]] 이런 것도 나온다.

 옛날에는 __proto__이렇게 나왔다.  __proto__로 해석하자면 학생1의 부모 유전자(Student.prototype)를 가르킨다.

 

옆에 화살표를 클릭해보면 확인할 수 있다.

 

그런데 아래 보면 또 [[Prototype]]이 있다. 클릭 해보자.

이런식으로 쭉 내 부모의 부모 유전자까지 탐색 할 수도 있다.

 

탐색해보면

모든 object 자료형은 Object()라는 생성자로부터 만들어진다. 

모든 array 자료형도 Object()라는 생성자로부터 만들어진다. (중간에 Array()라는 부모도 있다.)

모든 function 자료형도 Object()라는 생성자로부터 만들어진다.

 

🌈 그래서 자바스크립트는 모든게 다 Object라고 말하는 것이다.