프로토타입
자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는
거의 "모든 것" 이 객체다.
객체지향 프로그래밍
객체지향 프로그래밍은 실세계의 실체(사물이나 개념)를 인식하는 철학적 사고를
프로그래밍에 접목하려는 시도에서 시작한다.
예를 들어, 사람은 이름, 주소, 성별, 나이, 신장, 체중 등 다양한 속성을 갖는다.
사람에게는 다양한 속성이 있으나 우리가 구현하려는 프로그램에서는 사람의
"이름" 과 "주소" 라는 속성에만 관심이 있다고 가정하자.
이처럼 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하는 것을
"추상화" 라 한다.
객체지향 프로그래밍은 객체의 상태를 나타내는 데이터와 상태 데이터를
조작할 수 있는 동작을 하나의 논리적인 단위로 묶어 생각한다.
따라서 객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조 라고 할 수 있다.
상속과 프로토타입
상속은 객체지향 프로그래밍의 핵심 개념으로, 어떤 객체의 프로퍼티 또는
메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다.
자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다.
상속을 통해 불필요한 중복을 제거해보자.
자바스크립트는 프로토타입을 기반으로 상속을 구현한다.
// 생성자 함수
function Circle(radius) {
this.radius = radius;
}
//Circle 생성자 함수가 생성한 모든 인스턴스가 getAera 메서드를
//공유해서 사용할 수 있도록 프로토타입에 추가한다.
//프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다.
Circle.prototype.getArea = function () {
return Math.PI * this.getArea ** 2;
};
// 인스턴스 생성
const circle1 = new Circle(1);
const circle2 = new Circle(2);
// Circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는
// 프로토타입 Circle.prototype 으로부터 getArea 메서드를 상속받는다.
// 즉, Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유한다.
console.log(circle.getArea === circle2.getArea); // true
console.log(circle1.getArea()); // 3.141592....
console.log(circle2.getArea()); // 12.56647....
접근자 프로퍼티
모든 객체는 접근자 프로퍼티를 통해 자신의 프로토타입.
즉 [[Prototype]] 내부 슬롯에 직접적으로 접근할 수 있다.
_ _ protype __ 는 접근자 프로퍼티다.
_ _ protype __ 접근자 프로퍼티는 상속을 통해 사용된다.
const person = {name: 'Lee'};
// Person 객체는 _ protype __ 프로퍼티를 소유하지 않는다.
console.log(person.hasOwnProperty(' _ protype __ ')); // false
// _ protype __ 프로퍼티는 모든 객체의 프로토타입 객체인 Object.prototype의 접근자 프로퍼티다.
console.log(Object.getOwnPropertyDescriptor(Object.prototye,' _ protype __ '))
모든 객체는 Object.prototype의 접근자 프로퍼티 _ protype __ 를 상속받아 사용할 수 있다.
console.log({}. _ protype __ === Object.prototype); // true
접근자 프로퍼티와 prototype 프로퍼티의 차이점
_ _ protype __
소유 : 모든 객체
값 : 프로토타입의 참조
사용 주체 : 모든 객체
사용 목적 : 객체가 자신의 프로토타입에 접근 또는 교체하기 위해 사용
prototype 프로퍼티
소유 : constructor
값 : 프로포타입의 참조
사용 주체 : 생성자 함수
사용 목적 : 생성자 함수가 자신이 생성할 객체(인스턴스)의 프로토타입을 할당하기 위해 사용
예를 들어, 생성자 함수로 객체를 생성한 후 _ _ protype __ 접근자 프로퍼티와
prototype 프로퍼티로 프로토타입 객체에 접근해보자.
// 생성자 함수
function Person(name) {
this.name = name;
}
const me = new Person('Lee');
// 결국 Person.prototype과 me._ _ protype __는
결국 동일한 프로토타입을 가르킨다.
console.log(Person.prototype === me._ _ protype __); // true
사용자 정의 생성자 함수와 프로토타입 생성 시점
생성자 함수로서 호출할 수 있는 함수, 즉 constructor는 함수 정의가
평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다.
프로토타입 체인
자바스크립트는 객체의 프로퍼티(메서드 포함)에 접근하려고 할 때 해당 객체에
접근하려는 프로퍼티가 없다면[[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모
역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다.
이를 프로토타입 체인이라 한다.
프로토타입 체인은 자바스크립트가 객체지향 프로그래밍의 상속을 구현하는
매커니즘이다.
태초의 Object 밑에 각 Function , Number , String 등등
객체의 프로퍼티에 접근하려고 할 때 각각의 부모 역할을 하는 프로토타입의
프로퍼티를 순차적으로 검색해서 올라간다는 뜻.
프로토타입 체인은 엄청 거창한 뜻이 있는 것보단
상속과 프로퍼티 검색을 위한 메커니즘 이라고 할 수 있다.
