[JS] Prototype

minyoungdumb·2022년 5월 18일
0

JavaScript

목록 보기
9/18
post-thumbnail

prototype에 대해 알아보자.

function User(first, last) {
  this.firstName = first;
  this.lastName = last;  
}
User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`;
};
const bradley = new User("Minyoung", "Kim");
const rachael = new User("Kayeon", "Kim");
console.log(bradley.getFullName());
console.log(rachael);

위 코드를 보면 prototype을 이용해 user라는 함수에 getFullName이라는 함수를 지정해준 걸 볼 수 있다.
그렇게 되면 console에 bradley와 rachael을 출력해보면,
getFullName이라는 함수가 담겨 있다는 것을 알 수 있다.
//
user라는 함수의 firstName과 lastName은 생성자함수가 생길 때마다 변화하는 걸 알 수 있다. 그래서 통일해서 관리하기 힘들지만,
getFullName이라는 함수는 로직이 같기 때문에 통일해서 메모리를 효율적으로 관리해주기 용이하다. 그렇기 떄문에 user라는 함수에 숨어있는 prototype이라는 속성을 활용해 getFullName을 할당해주면 수 많은 객체가 생겨나도 getFullName이라는 메소드는 메모리에 한번만 만들어져 있다.
또한 instance(bradley, rachael)들은 getFullName이라는 함수를 '참조'한다고 이야기할 수 있다. 또한 조금 더 정보를 보태자면, 자바스크립트라는 언어 자체는 prototype을 많이 사용하고 있다. 그래서 자바스크립트를 prototype 기반의 프로그래밍언어라고도 한다.


(간단하게 a라는 배열을 만들어보면 a라는 배열 내의 prototype 내에 수많은 메서드가 존재하는 것을 확인할 수 있다.)

처음 생성한 user 라는 함수에 메소드를 추가해보자.

function User(first, last) {
  this.firstName = first;
  this.lastName = last;
  this.getFullName = function(){
    return `${this.firstName} ${this.lastName}`;
  }
}

생성자 함수의 첫번째 글자는 파스칼케이스를 따라 대문자로 작성한다.
또한, 첫 글자를 대문자로 작성하기 때문에 생성자 함수를 만든다는 것을 직관적으로 알 수 있다. (관행적으로 오래도록 사용되고 있다.)

profile
안녕하세요, FE 개발자 김민영입니다.

0개의 댓글