자바스크립트는 유사하다고 느껴졌던 python, java와는 다르게 클래스 기반 객체지향 프로그래밍 언어와는 전혀 다르게 동작한다.
✅ 프로토타입
자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이다.
ES6에서 calss가 생겨 최근에는 대부분 class를 사용하고 있지만, 근간은 프로토타입으로 이루어져있다.
- 모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로써
프로토타입 객체를 가진다.
📕 프로토타입 링크
'a'라는 속성이 없어도 prototype Ojbect에 해당 속성이 존재하면 참조 가능하다.
prototype속성은 함수만 가지고 있지만,__proto__속성은 모든 객체가 가지고 있다.
__proto__속성을 사용해 상위 프로토타입과 연결시켜 속성들을 참고 가능한데 이러한 형태를 prototype chain(프로토타입 체인)이라고 한다.
📘 프로토타입 객체
기본 속성으로 constructor와 __proto__를 가지고 있다.
constructor: 선언한 생성자 함수를 가리킴.(함수를 생성하는 호출)prototype: 생성자 함수에 정의한 모든 객체가 공유할 원형proto: 프로토타입의 링크로, 생성자 함수에 정의해 두었던 prototype를 참조한다.
출처: https://velog.io/@adam2/자바스크립트-Prototype-완벽-정리
📙 프로토타입의 유용성(상속)
우선 간단하게 파라미터로 들어온 사각형의 길이를 받아 넓이를 반환해주는 생성자 함수를 만들었다.
일반적인 생성자 함수의 메서드
function Square(length){
this.length = length;
this.getArea = function(){
return this.length*1;
}
}
const square1 = new Square(2); // {length: 2, getArea: f}
const square2 = new Square(3); // {length: 3, getArea: f}여기서 주의깊게 보아야 할 부분은 getArea이다. getArea가 하는 일은 square1, square2에 상관없이 모두 동일한 작업을 한다.
동일한 작업을 하지만 square1과 square2에서 각각 1번씩 호출되었다.
이러한 낭비를 줄이기 위해서 프로토타입을 사용한다.
프로포타입을 사용해 공유가능한 메서드
아래의 코드는 위의 코드와 같은 동작을 한다.
function Square(length){
this.length = length;
}
Square.prototype.getArea = function(){
return this.length*1;
}
const square1 = new Square(2); // {length: 2}
const square2 = new Square(3); // {length: 3}첫 번째 코드와의 차이점은 prototype에 getArea를 넣어 줌으로써 공유가 가능하게 만들어 주었다는 점이다.
따라서 getArea 메소드는 square1, square2에 각각으로 만들어지지 않고, 프로토타입 __proto__에 저장되어 한 번만 만들어진다.
참고 자료:
꾸준하게 공부하기