프론트엔드/JavaScript
[Deepdive] 19장 프로토타입
반신욕좋아하는J
2022. 4. 7. 21:43
반응형
프로토 타입을알기전에 객체지향 프로그래밍에대해서 알아보자
자바스크립트는 객체 기반의 프로그래밍 언어이며 원시값을 제외한 나머지값들이 모두 객체이다.
객체지향언어는 특징이나 성질을 나타내는 속성을 통해 여러개의 값을 하나의 단위로 구성한 객체로 이루어져있고 그 객체의 상태 , 동작을 하나의 논리적인 단위로 묶어서 생각한다. 각 객체는 독립적인 부품으로 볼수있지만 다른 객체와의 관계성을 가질수있다.
상속이란?
상속은 객체 지향 프로그래밍 핵심 개념으로 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아서 그래도 사용하는 것을 말한다.
자바스크립트는 프로토타입 을 기반으로 상속을 구현하여 불필요한 중복을 제거한다 그방법으로 기존의 코드를 적극 재사용하게되는데 이는 개발비용을 현저히 줄일수있는 잠재력이다.
// 프로토타입 을 기반으로 상속 받기
function Circle(radius) {
this.radius = radius;
}
// 생성자 함수에 prototype 프로퍼티에 해당 내용들이 들어가게된다.
// 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩 되어있다.
Circle.prototype.getArea = function () {
return Math.PI * this.radius ** 2;
};
//인스턴스 생성
const circle1 = new Circle(1);
const circle2 = new Circle(2);
// Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유한다.
console.log(circle1.getArea === circle2.getArea) // true
console.log(circle1.getArea()); // 3.14..
console.log(circle2.getArea()); // 12.56..
위처럼 이전 생성자 함수로만 생성했을때는 불필요한 getArea 함수를 계속 생성했기에 메모리 에 낭비가 심했다
프로토타입으로 인해 불필요한 중복을 제거하고 각 인스턴스는 하나의 함수를 공유하기때문에 메모리 효율이 좋다.
반응형