🎈 프로토타입
자바스크립트 자체에는 클래스라는 개념이 없고, 기존의 객체를 복사해서 새로운 객체를 생성하여 사용하는데 이 때문에 자바스크립트를 프로토타입 기반의 언어라고 말한다
- 원형 객체(original form) === 원형이 갖는 속성과 메소드를 담은 객체
- 어떠한 객체가 만들어지기 위해 그 객체의 모태가 되는 객체
- 원형 객체의 속성과 메소드, 즉 부모 객체의 속성과 메소드를 상속 받기 위한 템플릿처럼 기능
- 인스턴스가 초기화될 때 실행하는 생성자 함수
원형 객체?
자바스크립트에는 클래스가 없기 때문에 원래라면 상속기능도 없다고 볼 수 있지만 프로토타입을 사용하여 상속기능을 만들어 사용한다
모든 함수에는 프로토타입이라는 특수한 객체가 있는데, 이 프로토타입에는 하위 객체에 상속할 수 있는 속성과 메소드를 담고있다
예를 들어 Array.prototype.concat()은 배열을 생성할 때 사용하는 전역 객체 Array라는 원형의 prototype이라는 객체에 담긴 concat()메서드를 말한다
클래스와 인스턴스, 그리고 프로토타입의 관계
-
위에서 아래로
Array 클래스 객체와 Array의 prototype객체(프로토타입 객체) 생성
클래스(부모)라는 생성자 함수 > Array의 prototype 프로퍼티를 이용하여 Array의 prototype 객체에 접근 > new 클래스를 사용하여상속받은 원형(부모)의 메소드를 사용할 수 있는인스턴스(자식) 객체 -
아래에서 위로
인스턴스 객체 >인스턴스 객체를 생성한 클래스 객체의프로토타입 객체 >프로토타입이란 객체를 만들어낸 생성자 함수인클래스Array.prototype을 통해 Array의 프로토타입 객체에 접근이 가능
마찬가지로arr.__proto__을 통해서도 Array의 프로토타입 객체에 접근이 가능하다
prototype 프로퍼티
- 함수 객체만 가지고 있는 속성
- 함수 객체가 생성자로 사용될 때, 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체(Prototype 객체)를 말함
- constructor라는 프로퍼티를 가짐, constructor를 통해 Array객체에 접근
__proto__ 프로퍼티
- 모든 객체가 가짐
- 객체의 입장에서 자신의 부모 역할을 하는 Prototype 객체를 말함
- 특정 객체의 부모 객체로 링크를 이어줌
🎈 프로토타입 체인
자바스크립트에서는 프로토타입을 이용하여 속성을 할 수 있게 만들어주는데 이때 프로토타입 체인이 이를 가능하게 해준다
자바스크립트에서는 특정 객체의 속성이나 메소드에 접근하려고 할 때 해당 객체에 접근하려는 속성 또는 메소드가 없다면 __proto__ 로 이어지는 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례대로 검색한다
arr.push()는 왜 사용이 가능할까?
let arr = [a, b, c]는 사실 다음과 같다
let arr = new Array(); 즉, 우리가 변수를 선언하고 배열을 할당하는 것은 Array의 새 인스턴스를 만드는 행위였던 것이다
arr는 그 자체로는
.push()매소드를 가지고 있지 않아 출력시 오류가 나와야하지만 정상적으로 결과가 출력된다 이는 arr 객체에__proto__로 이어진 부모 역할을 하는 프로토타입 객체(Array.prototype)를 검색하여 .push()매소드`를 호출하였기 때문에 가능한 것이다
