🔖 객체지향2. prototype

function Student(이름) {
  this.name = 이름;
  this.age = 15;
  this.sayHi = function() {
    console.log('안녕하세요 ' + this.name + '입니다.')
  }
}

let 학생1 = new Student('강동욱');
let 학생2 = new Student('손흥민');
// ▲ Student가 가지고 있는 name, age, sayHi 속성들을 물려받음

// ▲ 이러한 과정을 전문용어로 상속이라고한다.

▲ 위 코드는 객체지향 용어로 상속(inheritance)이라고 한다.

Student라는 constructor가 가진 name, age, sayHi 속성들을 그대로 물려받아서 오브젝트를 하나 뽑아주는걸 상속이라고 부른다. 

그래서 상속해주는 것은 부모, 상속받는 오브젝트들은 자식이라고 비유해서 부른다.

 

❗️뒤에서도 constructor를 부모 new 키워드로 생성한 객체를 자식이라고 부르겠다.

 

 

 

상속을 구현할 수 있는 또 하나의 문법 prototype

prototype문법은 자바스크립트에만 존재한다.

자바스크립트는 에초에 상속이라는 개념을 염두하지 않고 만든 언어이다.

그래서 상속이라는 행위를 구현하기 위해 나중에 만들어낸 문법이 prototype이다.

 

prototype은 유전자라고 생각하면 좋다.

function Student(이름) {
  this.name = 이름;
  this.age = 15;
  this.sayHi = function() {
    console.log('안녕하세요 ' + this.name + '입니다.')
  }
}

Student.prototype.gender = '남자';
// ▲ 부모의 유전자에 속성과 값 추가해줌

let 학생1 = new 기계('강동욱');
let 학생2 = new 기계('손흥민');

console.log(학생1.gender)
// ▲ 부모의 유전자에 있어서 사용가능

console.log(학생1) 
// Student {name: '강동욱', age: 15, sayHi: ƒ}
// ▲ 학생1에는 gender라는 속성이 없음

▲ 위 처럼 생성자 함수(생성자)를 만들면 prototype이라는 공간이 자동으로 생긴다.

 

prototype은 유전자라고 했다.

prototype에 속성과 값을 추가하면 모든 자식들이 물려받기가 가능해진다.

 

 

 

prototype의 원리 : 왜 자식은 부모 유전자에게 등록된 값을 사용 가능할까??

▶︎  자바스크립트의 동작이 원래 그렇다.

► 자바스크립트는 오브젝트에서 데이터를 뽑을 때 확인하는 순서가 있다. 

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

let 학생1 = new Student(); 
// ▲ 학생1은 Student라는 생성자(함수)로 부터 상속받음

console.log(학생1.gender) // 남자

▲ 학생1.gender라고 사용하면 '남자'가 출력되는 이유는??

자바스크립트는 오브젝트에서 값을 출력할 때 아래 순서로 동작한다.

JS : (1) 학생1에 직접 gender라는 값이 있는가?

JS : (2) 그럼 부모 유전자에 gender라는 값이 있는가?

JS : (3) 그럼 부모의 부모 유전자에 gender라는 값이 있는가?

JS : (4) 그럼 부모의 부모의 부모의 유전자에 .. 그게 있는가?

자바스크립트는 이런 알고리즘으로 작동한다.

 

 

🌈 쉽게 말하면 자바스크립트는 오브젝트에서 값을 뽑을 때

1. 내가 직접 가지고 있는지 검사

2. 내가 가지고 있지 않으면 부모 유전자들을 차례로 검사

라고 정리하자.

 

 

 

prototype의 원리2 : toString, sort 등 자바스크립트 내장함수를 사용가능한 이유

자바스크립트 array, object 들에는 붙일 수 있는 내장함수들이 많다.

sort, push, toString, map, forEach 등 이런 것들을 array에 붙여서 사용 가능한데 그 이유를 알아보자.

 

### 참고 
console.log(학생1) // Student {name: '강동욱', age: 15, sayHi: ƒ}

학생1.toString();

위 콘솔로그 출력을 보면 학생1은 .toString()이라는 메서드를 가지고 있지도 않은데 어떻게 사용가능할까??

► 그 이유는 아래 순서를 보면 된다.

JS : (1) 학생1이 toSring()을 가지고 있는가? 있으면 실행

JS : (2) 부모 유전자에 toString()이 있는가? 있으면 실행

JS : (3) 그럼 부모의 부모 유전자에 toString()이 있는가? 있으면 실행

...반복...

(참고로 toString()은 부모의 부모유전자에 있음)

 

 

 

 

 

var arr = [1,2,3];
var arr = new Array(1, 2, 3); // 실제 array가 만들어지는 방식

▲ new 키워드를 주목!! Array라는 기계(생성자)로 부터 array 하나 뽑음

 

arr은 Array한테 상속받았다.

arr.sort() 이런거 쓸 수 있음 why??

► Array.prototype에 sort, map, filter 등 존재한다.(아래 사진 참고)

 

let arr = new Array(3, 2, 1);
arr.sort(); // (3) [1, 2, 3]

▲ 위 코드를 읽으면 자바스크립트는 아래 순서대로 동작

JS : (1) arr에 sort()가 있는가?

JS : (2) 그럼 arr 부모의 유전자(Array.prototype)에 sort()가 있는가?

 

🌈 모든 array 자료형은 Array 부모를 통해 만들어진다.

 

var obj = { name: 'Kim' }

var obj = new Object();

🌈 ▲ 모든 object 자료형은 Object 부모를 이용해 이렇게 만든다.