[Javascript] Prototype 이란?

JoGabi·2022년 1월 11일
0

javascript

목록 보기
4/10
post-thumbnail

Prototype 이란?

간단하게 말하면 상속, 유전자 라고 생각하면 될것 같다.

상속

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

프로토타입 이라는 공간이 생기게 된다
machine는 오브젝트(Object) Type 이다

prototype 추가

machine.prototype.gender = "남"

machine 의 prototype(유전자) 에 gender 항목을 추가하면 모든 자식들이 물려받을 수 있다!



var 학생1 = new machine("Park")
var 학생2 = new machine("Kim")
console.log(학생1.gender);
console.log(학생1); 

학생1, 학생2 는 machine 로부터 속성들을 물려받았다. = 상속을 받았다.

출력을 해보면 학생1.gender 에는 "남" 이 출력이 되는데 학생1 에는 gender 속성이 없다 왜냐하면 부모 유전에 추가했기 때문이다.

console.log(machine.prototype);

출력을 해보면 muchine 의 prototype 정보를 확인할 수 있다

console.log(학생1); 는 안찎히는데 왜 console.log(학생1.gender); 는 찍힐까?

원리 : 그냥 자바스크립트 코드가 그렇게 짜여져 있다

그렇다면 그냥 javascript 가 어떻게 할까?

console.log(학생1.gender)

javascript 에서 하는일
1. 학생1.gender 있나 검사
그 다음을 검사 : 학생의 부모 유전자 (machine.prototype)을 찾는다

그래서 학생1을 출력할 때 gender 속성이 없지만 부모 prototype 에서는 gender 가 있기 때문

부모의 또 부모?

console.log(학생1.toString())

이번엔 부모에도 없는 toString() 이 있다.. 이건 무엇?
machine prototype 에도 없으면 machine의 부모를 찾는다

내장함수

Array

우리는 평소에 첫번째 방식으로 값 선언을 하는데
실제로 컴퓨터는 이런식으로 Array 를 만든다.

var arr = [1, 2, 3]
var arr = new Array(1, 2, 3)

이전에 내장함수들을 왜 쓸수 있었을까?

[1, 2, 3].map()
[1, 2, 3].sort()
[1, 2, 3].push() 

사용가능한 이유는 arr 에 sort 라는 함수가 없지만 arr 의 부모인 Array prototype 를 보면 납득이 갔다.
Array 에 사용할 수 있는 기본 함수들이 가지고 있기 때문에 쓸 수 있는 것이다.

모든 Array 의 부모들은 다 이것임 !!! 모든 Array 프로토타입에는 sort 함수가 있다는 의미 !

console.log(Array.prototype);

Object

상단에서 선언한 machine 은 Object 형식이다.
object 도 마찬가지이다

machine.prototype 의 부모인 Object 도 이런 이유이다. (최종부모 Object)

첫번째로 보통 선언 하지만
두번째로 컴퓨터에서는 이렇게 선언한다.

var obj = { name: "kim" }
var obj = new Object()

그렇다면 Object prototype 도 확인 !

console.log(Object.prototype);

profile
서울에서 프론트엔드 개발자로 일하고 있는 Gabi 입니다. 프론트엔드: Javascript, React, TypeScript 에 관심이 있습니다.

0개의 댓글