JS. 생성자 함수(prototype)

생성자 함수(prototype) 

생성자 함수와 일반 함수의 기술적 차이는 없다.

하지만 생성자 함수는 두 가지 관례를 따라야 한다.

1. 함수 이름의 첫 글자는 대문자로 시작한다.
2. 반드시 'new' 연산자를 붙여준다.

일반적인 함수의 모습이다.

또한 리터럴 방식으로 코드가 작성된다.

리터럴 방식

자바스크립트는 리터럴 표기법을 이용해, 필요한 요소들을 열거하는 것 만으로 객체를 만들 수 있다.

이러한 표기법은 JSON에도 영감을 주었다.

{ }, [ ], " " 등을 예로 들 수 있다.

const imae = {
  firstName: 'Imae',
  lastName: 'Kwak',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`
  }
}

console.log(imae)

실행 결과
{
  firstName: 'Imae',
  lastName: 'Kwak',
  getFullName: [Function: getFullName]
}

this를 사용했는데 다음 블로그 글에서 자세히 알아볼 것이다. 일단 넘어가자.

실행결과 imae라는 변수안의 내용이 출력되는 것을 볼 수 있다. firstName, lastName 이라는 두 가지 매개변수를 사용한 모습도 볼 수 있다.

const imae = {
  firstName: 'Imae',
  lastName: 'Kwak',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`
  }
}

console.log(imae.getFullName())

실행 결과
Imae Kwak

getFullName() 함수를 실행한 결과, 성과 이름이 정상적으로 출력된다.

const amy = {
  firstName: 'Amy',
  lastName: 'Clarke',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`
  }
}

console.log(amy.getFullName())

const neo = {
  firstName: 'Neo',
  lastName: 'Smith',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`
  }
}

console.log(neo.getFullName())

실행 결과
Amy Clarke
Neo Smith

아까와 같은 방식으로 두 개를 더 만들었다.

생성자 함수 방식을 사용하면 어떻게 될까?

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

const imae = new User('imae', 'kwak')
const amy = new User('Amy', 'Clarke')
const neo = new User('Neo', 'Smith')

console.log(imae.getFullName()) // 생성자 함수
console.log(amy.getFullName())
console.log(neo.getFullName())

실행 결과
imae kwak
Amy Clarke
Neo Smith

특징적인 것은 위에서 살펴보았듯이 함수 이름의 첫 글자는 대문자로 시작했고, (User)

'new' 연산자를 붙여주었다.

또 하나의 특징은 prototype을 붙여주었다는 것이다.

prototype

다른 언어에 존재하는 class가 Javascript에는 존재하지 않는다.

대신 prototype이라는 것이 존재한다.

javascript의 모든 객체는 prototype이라는 객체를 가지고 있다.

모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속을 받는다.

이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며,

이때 상속되는 정보를 제공하는 객체를 prototype이라고 한다.