<프로토타입 이란?>
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/
https://www.programiz.com/javascript/prototype
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype
'웹 개발 (Frontend Developer) > JavaScript' 카테고리의 다른 글
JavaScript에서 == 와 === 차이점 (4) | 2024.11.07 |
---|---|
Strict Mode (엄격 모드) (3) | 2024.11.07 |
이벤트 루프 (Event Loop) (3) | 2024.10.30 |
콜 스택 (Call Stack)과 힙 (Heap) (1) | 2024.10.30 |
IIFE (Immediately Invoked Function Expression) (1) | 2024.10.01 |