prototype?

코드스쿼드애서 프로토타입이라는 키워드가 주워졌다. 평소에 prototype이 체이닝이 된다는 사실은 알고 있었는데 여러가지 프로토타입 키워드가 주어지는 상황에서 각각의 prototype을 설명해보겠다. 오늘의 키워드는 아래에 있는 것들이다.

prototype object __proto__ prototype link prototype property

함수는 생성될떄 두가지 일을 한다.

우선 만든 함수에 생성자 자격이 주어진다.
prototype object 를 생성해 두 사이간의 연결한다. 이때 함수에는 prototype property (흔히 말하는 자바스크립트의 키)를 생성하고 prototype object 에는 constructor property 를 생성해 생성자 함수를 가르키게 된다.
함수에 prototype link는 Function prototype link를 가르키게 되고, prototype object의 prototype link는 Object prototype link 를 가르키게 된다.

아래는 생성자 함수를 만들어서 내부에 있는 프로퍼티들을 확인해 본 것이다.

const Person = function(name) {
     this.name = name 
}

console.dir(Person)
console.dir(Person.prototype)

지난번 포스팅에서 new 키워드를 가지고 포스팅을 했었다. new 키워드는 뒤에 오는 생성자 함수를 기반으로 새로운 객체 인스턴스를 생성한다. 우리가 말하는 객체, 즉 사용자 정의 객체는 모두 함수를 통해 만들어 진다.

var obj = {}

키워드도 내부적으로는

var obj = new Object()

Object 생성자 함수를 통해 만들어 진다.

위애 내용중 함수의 생성이 있었다. 위 과정이 끝난 이후에 만들어진 생성자 함수로 새로운 객체를 만드는 과정에서의 prototype의 변화에 대해서 알아보자.

우선 함수의 생성까지의 그림이다.

let foo = new Person("foo")

한마디로 이 그림을 정의할 수 있다.

"모든 객체의 prototype link(__proto__) 는 자신을 만든 생성자함수의 prototype property가 가르키고 있는 prototype object를 가르킨다."

오승환 미디엄에 이해에 좋은 사진이 있어 첨부하였다.

const Person = function(name) {
    this.name = name
}

let foo = new Person("foo")

console.dir(Person)
console.dir(foo)

prototype에 관한 지식이 혼용되는 경우가 많았는데 이번 기회에 조금이나마 개념을 확립할 수 있어서 좋았던 것 같다.

[참고 서적] 인사이드 자바스크립트

PAPICO's DEVELOG