TIL 78 | 프로토타입
모던자바스크립트 Deep Dive "19장 프로토타입"을 요약해보자. 프로토타입이란 무엇인가?
객체지향 프로그래밍이란❓
자바스크립트는 명령형, 함수형, 프로토타입 기반의 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.
프로토타입 기반의 객체지향 프로그래밍 이 무엇일까?
-
프로토타입 : 프로토타입 객체의 줄임말. 프로토타입은 어떤 객체의 상위(부모) 객체의 역할을 하는 객체. 다른 객체에 공유 프로퍼티(메서드 포함)를 제공한다. 프로토타입을 상속받은 하위(자식) 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다. 즉, 객체간 상속을 구현하기 위해 사용된다.
- 객체 : 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라고 한다.
- 객체의 구성 : 객체는 상태 데이터(property)와 동작을 하나의 논리적인 단위로 묶은(method) 복합적인 자료구조
- 객체의 특성 : 각 객체는 고유의 기능을 갖는 독립적인 부품. 자신의 고유한 기능을 수행하면서 다른 객체와 관계성을 가질 수 있다(메세지를 주고받기, 데이터 처리, 상속)
- 객체 : 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라고 한다.
-
객체지향 프로그래밍 : 프로그램을 여러 개의 독립적인 단위, 즉 객체의 집합으로 표현하는 프로그래밍 패러다임이다.
-
상속 : 객체지향 프로그래밍의 핵심 개념. 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용하는 것이 상속. JS는 프로토타입을 기반으로 상속을 구현하여, 코드의 불필요한 중복을 제거한다.
-
상속에 의한 메서드 공유
-
상속에 의한 메서드 공유 코드
-
-
function Circle(radius) {
this.radius = radius;
}
Circle.prototype.getDiameter = function () {
return Math.PI * this.radius ** 2;
};
const circle1 = new Circle(1);
const circle2 = new Circle(2);
console.log(circle1.getDiameter === circle2.getDiameter); // true;
console.log(circle1.getDiameter()); // 3.141592653589793
console.log(circle2.getDiameter()); // 12.566370614359172
프로토타입 객체에 대하여❗
- 모든 객체는 [[Prototype]]이라는 내부 슬롯을 가진다. 모든 객체는 하나의 프로토타입을 갖는다.
- [[Prototype]]에 저장되는 프로토타입은 객체 생성 방식에 의해 결정된다. 즉, 객체가 생성될 때 객체 생성 방식에 따라 프로토타입이 결정되고 [[Prototype]]에 저장된다.
- 객체 리터럴에 의해 생성된 객체의 프로토타입 : Object.prototype
- 생성자 함수에 의해 생성된 객체의 프로토타입 : 생성자 함수의 prototype 프로퍼티에 바인딩되어 있는 객체
- 모든 프로토타입은 생성자 함수와 연결되어있다.
[[Prototype]] 내부 슬롯에는 직접 접근할 수 없지만, 위 그림처럼
__prototype__
접근자 프로퍼티를 통해 자신의 프로토타입에 간접적으로 접근할 수 있다. 그리고 프로토타입은 자신의 constructor 프로퍼티를 통해 생성자 함수에 접근할 수 있고, 생성자 함수는 자신의 prototype 프로퍼티를 통해 프로토타입에 접근할 수 있다.
__proto__
접근자 프로퍼티
- 모든 객체는
__proto__
접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다 - student 객체를 생성한 뒤, 콘솔에서 출력해보자
- 아래의 그림에서
__prototype__
아래의 항목들이 student 객체의 프로토타입인 Object.prototype이다. __prototype__
접근자 프로퍼티를 통해 student 객체의 [[Prototype]] 내부 슬롯이 가리키는 객체인 Object.prototype에 접근한 결과를 콘솔에 출력한 것.
- 아래의 그림에서
- 모든 객체는
__prototype__
접근자 프로퍼티를 통해서 프로토타입을 가리키는 [[Prototype]] 내부 슬롯에 접근할 수 있다
- 접근자 프로퍼티 : 자체적으로 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수(getter/setter)로 구성된 프로퍼티
__prototype__
접근자 프로퍼티는 객체가 직접 소유하는 프로퍼티가 아니라 Object.prototype의 프로퍼티다. 모든 객체는 상속을 통해Object.prototype.__proto__
접근자 프로퍼티를 사용할 수 있다
Object.prototype
모든 객체는 프로토타입의 계층 구조인 프로토타입 체인에 묶여있다. JS 엔진은 객체의 프로퍼티(메서드 포함)에 접근하려고 할 때, 해당 객체에 접근하려는 프로퍼티가 없다면__prototype__
접근자 프로퍼티가 가리키는 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다. 프로토타입 체인의 종점, 즉 프로토타입 체인의 최상위 객체는 Object.prototype이며, 이 객체의 프로퍼티와 메서드는 모든 객체에 상속된다.
함수 객체의 prototype 프로퍼티
함수 객체가 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킨다
// 함수 객체는 prototype 프로퍼티를 소유한다
(function () {}).hasOwnProperty('prototype'); // true
// 일반 객체는 prototype 프로퍼티를 소유하지 않는다
({}).hasOwnProperty('prototype'); // false
Author And Source
이 문제에 관하여(TIL 78 | 프로토타입), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yeonbee/TIL-78-프로토타입저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)