프로토타입이란?
JavaScript는 프로토타입 기반 객체지향 프로그래밍 언어입니다.
클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성하지만,
프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이도 객체를 생성할 수 있습니다.
자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있기 때문에,
부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 합니다.
이 때, 부모 객체를 Prototype(프로토타입)이라고 하고,
Prototype은 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용합니다.
이는 객체를 생성할 때, 그 객체는 자신의 부모 역할을 하는 프로토타입 객체를 가리키는 [[prototype]]라는 내부 슬롯을 갖습니다.
function Person() {};
let person1 = new Person();
console.log(person1.__proto__=== Person.prototype); // true
Person.prototype : Person 함수를 통해 생성된 객체의 부모 역할을 하는 프로토타입 객체
person1.__proto__ : person1 객체의 부모 역할을 하는 프로토타입 객체
프로토타입 체이닝
프로토타입 체이닝은 특정 객체의 속성을 참조하거나 메서드를 호출할 떄, 해당 객체에 접근하려는 속성 또는 메서드가 없다면 [[Prototype]]이 가리키는 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 속성이나 메서드를 참조하거나 호출하는 것을 말합니다.
객체 생성 방법 3가지
1. 객체 리터럴 : ex) let emptyObject = {};
2. 생성자 함수 : ex) let person = new Person('Lee', 'male');
3. Object() 생성자 함수 : ex) let person = new Object();
var person = {
name: 'Lee',
gender: 'male',
sayHello: function(){
console.log('Hi! my name is ' + this.name);
}
};
console.log(person.__proto__ === Object.prototype); // true
console.log(Object.prototype.constructor === Object); // true
console.log(Object.__proto__ === Function.prototype); // true
console.log(Function.prototype.__proto__ === Object.prototype); // true
결론적으로 객체 리터럴을 사용하여 객체를 생성한 경우, 그 객체의 프로토타입 객체는 Object.prototype입니다.
이처럼 프로토타입과 프로토타입 체이닝을 통해 JavaScript는 객체 간 상속과 메서드 재사용을 가능하게 합니다.
참고자료
https://poiemaweb.com/js-prototype
https://poiemaweb.com/js-object#2-%EA%B0%9D%EC%B2%B4-%EC%83%9D%EC%84%B1-%EB%B0%A9%EB%B2%95
'기술 개발 > Javascript' 카테고리의 다른 글
동기(Synchronous)와 비동기(Asynchronous) (0) | 2023.04.16 |
---|---|
순수 함수 (feat. 불변성, 사이드 이펙트) (0) | 2023.04.05 |
const - 요소나 속성을 추가할 수 있는 이유 (0) | 2023.04.03 |
require vs import (0) | 2023.04.03 |
this 가 동작하는 원리와 용법 (0) | 2023.03.31 |