본문 바로가기
웹 개발 (Frontend Developer)/JavaScript

프로토타입 (Prototype)

by Jackykim 2024. 11. 6.

<프로토타입 이란?>

JavaScript에서 함수가 생성될 때 해당 함수에는 자동으로 prototype 속성이 추가되어, 이 함수로부터 생성된 객체들이 메서드와 속성을 공유할 수 있는 구조를 갖습니다. 이 프로토타입 객체는 메서드와 속성을 추가할 수 있는 공간을 제공하여, 해당 함수로 생성된 모든 객체에 상속을 쉽게 적용할 수 있습니다. 함수가 new 키워드로 호출되면, 생성자의 prototype 속성이 새로 생성된 객체의 프로토타입이 됩니다.

상단 코드 확인해보면 :

  • Car()라는 생성자 (Constructor) 함수를 정의했습니다.
  • 그 다음 프로토타입에 속성 "car.prototype.color = "Red"를 추가하여 속성에 값을 빨간 색으로 정의 했습니다. 이제 Car.prototype.color로 이 속성을 접근 할 수 있습니다. 
  • drive()라는 메서드를 프로토타입에 추가하면 Car로 생성된 모든 객체에서 이 메서드에 접근할 수 있습니다.

참고 내용 : ES6에서 클래스가 도입된 이후 프로토타입의 사용이 크게 줄어들었습니다. 하지만 JavaScript에 대한 이해를 높이기 위해 여전히 배워 두는 것이 좋습니다.

 

<프로토타입 상속>

생성자 함수의 프로토타입에 추가된 속성이나 메서드에 해당 함수로부터 생성된 모든 객체가 접근할 수 있습니다.

 

C1 과 C2 둘다 빨간색 속성을 C1.color와 C2.color로 접근할 수 있으며 C1.drive와 C2.drive로 drive() 메서드에 접근할 수 있습니다.

 

참고 내용 :
https://www.geeksforgeeks.org/prototype-in-javascript/

 

Prototype in JavaScript - GeeksforGeeks

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

www.geeksforgeeks.org

https://www.programiz.com/javascript/prototype

 

JavaScript Prototype (with Examples)

Before continuing this tutorial, make sure you are familiar with: In JavaScript, prototypes allow properties and methods to be shared among instances of the function or object. For example, function Car() { console.log("Car instance created!"); }; // add a

www.programiz.com

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype

 

Function: prototype - JavaScript | MDN

The prototype data property of a Function instance is used when the function is used as a constructor with the new operator. It will become the new object's prototype.

developer.mozilla.org