본문 바로가기
기술 개발/Javascript

프로토타입과 객체지향 프로그래밍

by 쪼짱 2024. 3. 20.
728x90
반응형
SMALL

프로토타입이란?

 

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

 

객체 리터럴 방식으로 생성된 객체의 프로토타입 체인(https://poiemaweb.com/js-prototype)

 

결론적으로 객체 리터럴을 사용하여 객체를 생성한 경우, 그 객체의 프로토타입 객체는 Object.prototype입니다.

 

이처럼 프로토타입과 프로토타입 체이닝을 통해 JavaScript는 객체 간 상속과 메서드 재사용을 가능하게 합니다.

 

 

 

 

 

 

 

 


참고자료

https://poiemaweb.com/js-prototype

 

Prototype | PoiemaWeb

자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게

poiemaweb.com

https://poiemaweb.com/js-object#2-%EA%B0%9D%EC%B2%B4-%EC%83%9D%EC%84%B1-%EB%B0%A9%EB%B2%95

 

Object | PoiemaWeb

자바스크립트는 객체(object)기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”은 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두

poiemaweb.com

 

 

 

728x90
반응형
LIST