JS를 독학하면 놓치기 쉬운 부분들(4) - 생성자

김현우·2020년 10월 21일
0

JavaScript

목록 보기
4/8
post-thumbnail

배열을 만들어보자

const arr1 = new Array()

위의 코드에서 배열을 만들기 위해 new+함수()라는 코드를 썼다.

이처럼 호출하는 함수 앞에 new키워드를 붙이면, 이 함수는 객체를 하나 만들어서 반환하며 이 함수를 생성자 라고 부른다.

여기서 생성자 함수가 반환하는 객체는 함수의 prototype프로퍼티가 가리키는 객체를 부모로 삼는 빈 객체이다.

함수를 만들면 객체가 하나 더 생긴다

모든 함수는 prototype프로퍼티를 가진다. 그 함수가 생성자의 역할로 쓰일 것을 감안하여, 함수를 생성하면 내부적으로 그렇게 만들어진다.

prototype프로퍼티는 객체를 가리킨다. 그 함수가 생성자로 쓰였을 때, 어떤 객체한테 아이를 낳으라고 부추긴 후 출산 즉시 아이를 들고 도망쳐 우리에게 준다. 그렇다면 우리는 범죄자인가
우리가 받은 객체의 부모가 바로 함수의 prototype프로퍼티가 가리키는 객체이다.

그런데 아직도 그 부모라는 놈이 뭐하는 놈인지 정체를 모르겠지 않은가.

결론을 말하자면, F1이라는 함수를 만들면

  1. F1.prototype이라는 객체가 하나 생기고
  2. 함수의 prototype프로퍼티가 F1.prototype객체를 가리키게 된다.

그리하여, 우리가 F1함수를 생성자로 사용하면 F1.prototype을 부모로 하는 빈 객체가 반환되는 것이다.

여기에서 F1.prototype객체는 Object.prototype객체를 부모로 삼는다.

이제 배열을 다시 뜯어보자

자바스크립트 내부에는 Arrary()라는 함수가 있다. 내가 만들지 않았다.

이 Array함수의 구조를 뜯어보자.

이 함수에도 prototype, __proto__프로퍼티가 있으며, 함수이기 때문에 __proto__프로퍼티는 Function.prototype객체를 가리키고 또 그 __proto__프로퍼티에는 1세대 조상인 Object.prototype객체가 있다.

함수를 만들면 함수명.prototype이라는 개체가 생기고, 함수를 생성자로 썼을 때 이 객체를 부모로 하는 새로운 객체가 반환된다고 했다.

먼저 Array 함수의 prototype프로퍼티를 펼쳐보자.

우리가 쓰는 배열의 메서드들이 이 객체에 들어있다.

Array함수에 new키워드를 같이 쓰면 이 객체를 부모로 하는 객체가 반환되고, 우리는 이를 배열이라고 부르며 살았던 것이다.

0개의 댓글