객체지향 1에서 배운 constructor에 관한 내용을 아주 멋진 객체지향 용어로 상속(inheritance)이라고 한다.
그래서 상속해주는 것은 부모, 상속 받는 Object들은 자식이라고 많이 비유해서 불른다.
자바스크립트에서 constructor 말고도 상속기능을 구현 할 수 있는 '장치'가 하나 더 있다. 그것은....
Prototype
constructor(붕어빵 틀)를 만들면 prototype이라는 항목이 constructor안에 몰래 뿅 하고 생성이 된다.
확인은
function Student(){...}
console.log(Student.prototype)
// {constructor: ƒ} 이 뜸 object 형식임
// Student.prototype = Student 유전자라고 칭해도 괜찮을 듯prototype은 '유전자'임
-
contructor를 만들면 prototype이라는 공간이 자동으로 생김
-
instance.prototype 이런거 없다...
-
오직 constructor에 prototype이 있다.!!
Student.prototype 에 뭔가 변수나 함수가 들어가있다면
기계로부터 생성되는 새로운 오브젝트들(자식들)은 전부 그걸 그대로 물려받아 쓸 수 있습니다.
function 기계(){
this.name = 'Park';
this.age = 30;
}
var 사람 = new 기계();
// 기계의 유전자에 gender라는 key와 value 값을 등록
기계.prototype.gender = '남';
console.log(사람.gender) //남이 뜸
console.log(사람)// 근데 여기엔
// {name: 'Park', age: 30}
// 다시 돌아와서 기계의 유전자를 찍어보면...
console.log(기계.prototype)
// {gender: '남', constructor: ƒ} 이런식으로 나타난다.알아두기
-
prototype에는 값을 여러개 부여할 수도 있고 심지어 함수도 집어넣으실 수 있습니다. object 자료처럼 다뤄주시면 됩니다.
-
prototype에 추가된 데이터들은 자식들이 직접 가지는게 아니라 부모만 가지고 있습니다
Q. prototype에 작동원리 궁금하지 않음?
A. 궁금해 하자... 뭉길아...
prototype의 작동원리
자바스크립트는 오브젝트에서 데이터를 뽑을 때 확인하는 순서가 있다.
예를 들면
function 기계(){
this.name = 'Kim';
this.age = 30;
}
기계.prototype.gender = '남';
var 사람 = new 기계();
console.log(사람.gender) // 남▲ 자바스크립트는 오브젝트에서 값을 출력할 때 이런 순서로 물어본다.
- 사람에 직접 gender라는 값이 있는가?
- 없으면, 그럼 부모 유전자에 gender라는 값이 있는가?
- 그럼 부모의 부모 유전자에 gender라는 값이 있는가?
- 그럼 부모의 부모의 부모의.... 유전자에 있는가?
오브젝트는 이러한 순서로 실행함
내가 가지고 있지 않으면 부모에게 있나 확인, 없으면 부모의 부모 확인 그렇게 위로 거슬러 올라가서 있으면 출력 없으면 없다고 함
좀더 쉽게 이야기 하자면
- 내가 직접 가지고 있는지 검사당함
- 내가 가지고 있지 않으면 부모 유전자들을 거슬러서 차례로 검사
Q. 부모가 직접 가지고 있는지 검사 안하나? 🙄
A. 부모한테 다 물려받았을 낀데.. 유전자를 검사해야지.. 뭉기라... ☹내장함수는 어떻게 동작 하는가?
function 기계(){
this.name = 'Kim';
this.age = 30;
}
기계.prototype.gender = '남';
var 사람 = new 기계();
사람.toString()// 이거 사용 가능한데... 어떻게 쓸 수 있는거지?// 내가 흔히 만드는 Array 방법
var arr = [1,2,3];
// 자바스크립트가 Array를 만드는 방법
var arr = new Array(1,2,3)어? new Array() 이게 뭔뜻이드라??
Array라는 constructor에서 instance 뽑는 뜻 아닌가??
맞다..
그래서 Array로부터 생성된 자식들은 Array의 유전자에 부여되어있는 함수, 데이터들을 자유롭게 쓸 수 있는 것
var arr = new Array(1,2,3)
console.log(Array)
console.log(Array.prototype)
// sort,map,foreach.. 메소드 keyword 등 다 있음그러므로
- arr에 직접 sort()가 있는가?
- 그럼 arr부모의 유전자(=Array)에 sort()가 있는가?
있다면 sort를 사용하게 함
3. Array.prototype.sort()의 말 뜻은 모든 array들의 부모 Array 유전자에 sort()함수가 있다 라는 말임
다시 처음으로 돌아와서
function 기계(){
this.name = 'Kim';
this.age = 30;
}
기계.prototype.gender = '남';
var 사람 = new 기계();
사람.toString()// 이거 사용 가능한데... 어떻게 쓸 수 있는거지?사람.toString(); <- 이 내장함수 쓸 수 있던데 어떻게 쓸 수 있게 된걸까?
-
사람에 있음? 없음
-
그렇다면 부모 유전자에 있는가? 기계.prototype에 없음
-
그럼 기계의 부모 유전자에 있는지.
Object.prototype에 있는지 -> 있당이렇게 해서 쓸 수 있는거
