프로토타입을 알기 전 상속에 대해 알아야 한다
기본적으로 다른 언어에서는 상속이란 개념이 존재하는데 말그대로 부모요소에서 자식요소가 상속을 받아 코드를 재활용 하는 것이다
하지만 자바스크립트는 class 문법이 추가되긴 했지만 기본적으로 상속이라는 개념을 구현하기 위해 프로토타입 이라는 개념을 이용한다
프로토타입 이란?
프로토타입은 함수를 생성할 때 동시에 생성되는 객체이다!
function info(name, price) {
this.name = name;
this.price = price;
}
const 상품1 = new info("바지", 24000);
const 상품2 = new info("셔츠", 214000);
이러한 생성자 함수가 있다! 정말로 함수에 prototype이 존재하는지 확인하기 위해 console.log() 를 실행하면
이런식으로 prototype의 존재를 확인 할 수 있다.
그리고 객체와 마찬가지로 프로퍼티를 추가할 수도 있다!
info.prototype.size = "small";
이런식으로 생성자의 prototype에 프로퍼티를 생성하면 자식요소는 부모요소의 prototype을 참조하여 상속 받을 수 있다
작동원리1
그런데 나는 상품1에 size에 해당하는 값을 지정하지 않았는데 어떻게 small 이 출력이 되는걸까? 이것은 작동원리에 대해서 이해한다면 알 수 있다.
자바스크립트는 객체에서 값을 출력할 때 확인하는 순서가 있다.
먼저 상품1.name 같은 경우에는 내가 직접 선언을 해줬기 때문에 바로 상품1의 name값을 출력한다.
하지만 상품1.size의 값은 내가 직접 선언하지 않았기 때문에 상품1 객체는 size의 값을 가지고 있지 않는다. 이럴 경우에는 부모의 프로토타입을 참조한다.
상품1의 부모 프로토타입은 info.prototype이고 그 객체 안에는 size에 대한 값이 있기에 그 값을 출력하게 된다.
작동원리2
너무나도 당연하게 썼던 Array.length , Array.sort 이런 메서드 들은 사실 부모 객체의 프로토타입에 내장되어 있는 함수를 우리가 가져다 썼던 것이다.
const arr = [1,2,3];
const arr = new Array(1,2,3);이 두 코드의 의미는 완전히 같다. 우리가 보통 위의 코드처럼 작성하지만 컴퓨터에서 Array를 생성하는 방식은 아래의 코드와 같다.
아래의 코드를 잘 살펴보면 위에서 설명했던 코드와 형식이 같다.
const 상품1 = new info("바지", 24000);
const arr = new Array(1,2,3);그렇다! Array 라는 생성자의 prototype에 내장되어 있는 메서드를 우리는 가져다 쓰는 것 이었다!콘솔로그를 통해 Array.prototype을 출력하면
이렇게 내장함수들이 prototype에 내장되어 있는것을 확인할 수 있다!!
__proto__
__proto__는 부모 요소의 prototype을 의미한다.
console.log(상품1.__proto__) 를 입력하면
상품1 의 부모가 info라는 객체라는 것을 확인 할 수 있으며
상품1.__proto__ 는 info.prototype과 같다는 것도 확인할 수 있다.
프로토타입 체인
var 부모 = { name : 'Kim' };
var 자식 = {};
자식.__proto__ = 부모;
이런식으로 자식.__proto__ 를 통해 자식요소의 부모를 지정해 주어서 참조할 수도 있다.
이처럼 자식요소에서 특정 객체의 프로퍼티나 메소드 접근시 만약 현재 객체의 해당 프로퍼티가 존재하지 않는다면 __proto__가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것이 바로 프로토타입 체인이다.
모든 프로토타입 체이닝의 종점은 object.prototype
function person() {
this.name = "Kim";
this.age = 15;
}
var 사람1 = new person();위의 코드에서 사람1의 부모는 person 이다. person.prototype를 입력해보면
person.__proto__는 object 를 만드는 생성자 인 것을 확인 할 수 있다
자바스크립트의 모든 object,array,함수 자료형의 조상은 object()이다.
