프로토타입

프로토타입

프로토타입이란?

흔히 자바스크립트를 프로토타입 언어라고 한다. 그 이유는 자바스크립트에 내장된 객체와 메소드 그리고 함수가 모두 프로토타입(Prototype)이라는 객체를 기반으로 동작하기 때문이다. 이에 대해 이어지는 예시를 통해서 알아보자.

인스턴스의 메소드 실행

일단 프로토타입 객체가 무엇인지를 확인하기 위해서 하나의 인스턴스를 생성하고 그 인스턴스의 메소드를 실행해볼 것인데 이를 참조형 타입의 경우와 기본형 타입의 경우로 나누어서 정리한다. 기본형 타입과 참조형 타입의 개념이 명확하지 않은 경우에는 이 글을 확인하자.

참조형 타입의 경우

참조형 타입 중에 하나인 배열 인스턴스를 다음과 같이 생성해보자.

var a = new Array(1, 2, 3); // 1. new 연산자를 사용해서 인스턴스 생성 var b = [1, 2, 3] // 2. 리터럴로 생성(내부적으로는 1번과 동일) console.dir(a);

참고로 인스턴스를 생성하는 방법은 2가지가 있다. 첫 번째는 생성자 함수에 new 연산자를 사용하는 방법이고 두 번째는 리터럴로 생성하는 방법이다. 하지만 리터럴로 생성하는 방법도 내부 동작은 첫 번째 방법과 동일하다. 즉, 개발자의 편의를 위해서 리터럴이 존재한다고 봐도 무방하다.

그림1. 참조형 타입

이제 위의 코드를 실행한 결과를 보자. 참조형 타입은 객체이기 때문에 내부에 속성이나 메소드를 포함할 수 있다. 여기서 [[Prototype]] 이라는 속성을 확인해보면 평소에 사용하던 배열 메소드들과 constructor 에는 배열 생성자 함수를 가지고 있는 객체임을 확인할 수 있다. 이를 프로토타입이라고 한다.

그림2. 배열의 프로토타입

이를 이해하기 쉽도록 도식화하면 다음과 같이 정리할 수 있다.

그림3. 배열 프로토타입의 도식

자바스크립트의 참조형 인스턴스의 메소드를 실행하면 위의 도식을 토대로 동작한다. 예를 들어, [1. 2. 3].map() 와 같이 map함수를 사용한다면 [[Prototype]] 을 통해 프로토타입 객체에 접근해서 내부의 메소드를 사용한 다음 결과를 반환해주는 식으로 동작하는 것이다.

기본형 타입의 경우

기본형 타입에서 메소드를 실행할 때는 참조형과는 과정이 좀 다르다. 기본형 타입인 숫자나 문자 리터럴은 객체가 아니기 때문에 내부에 [[Prototype]] 과 같이 프로토타입 객체와 이어주는 속성이 존재할 수 없다. 그렇기 때문에 기본형 타입에서 메소드를 실행하면 자바스크립트가 Number 나 String 생성자함수를 사용해서 임시로 인스턴스를 만들어 메소드를 사용한 뒤에 원하는 값을 반환한 다음 해당 인스턴스를 제거하는 방식으로 동작한다.

이와 같은 동작 방식은 null 과 undefined 를 제외한 모든 데이터 타입에 적용되고 이를 통해서 자바스크립트는 모든 인스턴스들이 프로토타입의 메소드를 공유해서 사용하기 때문에 중복없이 효율적으로 메소드를 관리할 수 있다는 장점이 가진다.

정리

지금까지 인스턴스와 생성자 함수 그리고 프로토타입 객체의 관계를 이해했다면 프로토타입과 생성자함수에 접근할 수 있는 다양한 방법을 다음과 같이 정리해볼 수 있다. 참고로 __proto__ 의 사용은 현재 권장되지 않는다.

프로토타입에 접근할 수 있는 방법

생성자함수.prototype

인스턴스.__proto__ (❌)

(❌) 인스턴스.

Object.getPrototypeOf(인스턴스)

생성자함수에 접근할 수 있는 방법

생성자함수

생성자함수.prototype.constructor

인스턴스.__proto__constructor (❌)

(❌) 인스턴스.constructor

Object.getPrototypeOf(인스턴스).constructor

프로토타입 체인

생각해보면 프로토타입도 객체이다. 그렇기 때문에 프로토타입은 Object 생성자함수의 인스턴스이며 Object의 프로토타입 객체를 참조하고 있다. 즉, 다음과 같이 인스턴스에서 프로토타입, 객체의 프로토타입으로 연결되어 있다. 이를 프로토타입 체인이라고 한다.

그림4. 프로토타입 체인

참조

- http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb;=KOR&barcode;=9791158391720&orderClick;=LEa&Kc;=

from http://leo-xee.tistory.com/30 by ccl(A) rewrite - 2021-12-13 05:28:16