JS_기본 문법 (24)_ 생성자 함수

1. 생성자 함수

함수는 재사용가능한 코드를 묶는 것 외에도 객체를 생성하는 역할을 수행할 수 있다.

※ function으로 선언된 함수는 기본적으로 생성자 함수의 기능을 갖는다.

 

 

예시) 객체 생성

const student1 = {
  name : 'Sam',
  idNum : 20,
  say () {
    return `안녕하세요. ${idNum}번 ${name}입니다.`;
  }
};

const student2 = {
  name : 'Tom',
  idNum : 25,
  say () {
    return `안녕하세요. ${idNum}번 ${name}입니다.`;
  }
};

위와 같이 비슷한 형태의 객체를 여러개 만들어야하는 경우 같은 코드를 반복하는 것이기 때문에

함수를 활용하면 더욱 편리하게 구현할 수 있다.

 

 

생성자 함수 생성 Rule

- 함수명을 대문자로 정의한다.   - return 문이 존재하지 않는다. (객체를 반환하는 함수랑 다름)   - 생성자 함수를 new 연산자와 함께 사용한다. (new를 사용해야 생성자 함수의 기능을 수행함, 안 붙이면 일반함수)   - ' this.~ ' 로 객체의 프로퍼티들을 정의한다.   - 생성자 함수에서는 메서드 정의가 불가하다.

 

예시)

function Student(name, idNum) {
  this.name = name;
  this.idNum = idNum;
  this.say = function() {
    return `안녕하세요. ${idNum}번 ${name}입니다.`;
  }
}

 

 

const student1 = new Student('Sam', 20);
const student2 = new Student('Tom', 25);

 

이처럼 new 연산자를 붙여서 사용해야만 의도한대로 객체를 생성할 수 있다.

 

만약 이를 사용하지 않는다면 undefined를 반환한다.

// new 연산자를 사용하지 않은 경우
const student3 = Student('David', 15);

console.log(student3);

>>> undefined

 

---

2. 생성자 함수로 만들어진 객체

생성자 함수로 만들어진 객체는 다른 방식의 객체와 다르다.

 

1) 프로토타입 prototype

프로토타입은 JS에서 객체지향을 구현할 수 있도록 돕는 역할을 한다.

초기에는 클래스가 존재하지 않았기 때문에 프로토타입으로 구현을 하였다.

 

클래스에 비해 뒤떨어지는 것이 아닌 사용에 따라 더 강력하게 사용이 가능하다.

또한 클래스 자체가 프로토타입을 기반으로 만들어졌다!

 

이에 대한 자세한 이야기는 추후에 따로 다루기로 하고 간단히만 알아보자!

 

 

예시) 생성자 함수와 객체 생성

function Player(name, job){
  this.name = name;
  this.job = job;
  this.info = function () {
    return `소환사명 : ${this.name} | 직업군 : ${this.job}`;
  }
}

const player1 = new Player('Kassid', '전사');

console.log(player1);

>>> Player {name: 'Kassid', job: '전사', info: ƒ}

 

위의 객체에 프로토타입을 이용하여 새로운 프로퍼티를 추가해보자!

//.prototype을 이용하여 새 프로퍼티 추가
Player.prototype.attack = function() {
  return '공격!';
}

기존에 미리 생성한 객체에도 새로운 프로퍼티가 생긴 것을 알수 있다.

console.log(player1.attack());

>>> 공격!

 

프로토타입을 수정하면 새로 만들어질 예정인 객체와 이미 존재하는 객체 모두 해당 내용이 적용된다.

 

비유하자면 본사에서 배포하는 메뉴얼과 같은 기능을 한다.

 

하지만 여기서 주의할 점은 프로토타입을 이용해 추가한 것은

일반 프로퍼티와 다르다는 것이다. (인스턴스 vs 프로토타입)

console.log(player1);

>>> 
Player {name: 'Kassid', job: '전사', info: ƒ}
    info: ƒ ()
    job: "전사"
    name: "Kassid"
    [[Prototype]]: Object
        attack: ƒ ()
        constructor: ƒ Player(name, job)
        [[Prototype]]: Object

위의 예시에서 알 수 있듯 [Prototype] 내에 정의가 되어 있다.

 

이에 대한 내용은 추후에 자세히 다룰 예정이다!

 

 

2) 다른 방식으로 만든 객체들과의 비교

위에서 언급한대로 생성자함수로 만든 객체는 다른 것들과 다르다.

그것을 직접 비교해보며 알아보자!

 

// 생성자 함수
function Player(name, job){
  this.name = name;
  this.job = job;
  this.info = function () {
    return `소환사명 : ${this.name} | 직업군 : ${this.job}`;
  }
}

// 객체 반환 함수
function createPlayer(name, job){
  return {
    name, job,
    info (){
      return `소환사명 : ${this.name} | 직업군 : ${this.job}`;
    }
  }
}

 

3가지 방법으로 만든 객체들을 비교해보자.

생성자 함수, 객체 반환  함수, 객체 리터럴 각각의 방식으로 생성해보면 아래와 같다.

// 1. 생성자 함수 이용
const player1 = new Player('Kassid', '전사');

// 2. 객체 반환 함수 이용
const player2 = createPlayer('Kassid', '전사');

// 3. 객체 리터럴 방식
const player3 = {
  name : 'Kassid',
  job : '전사',
  introduce : function () {
    return `소환사명 : ${this.name} | 직업군 : ${this.job}`;
  }
}

 

console.log(player1);
console.log(player2);
console.log(player3);

위의 결과 화면을 보면 알 수 있듯이

오직 생성자로 생성한 객체만 다름을 알 수 있다.

 

이는 log에서 표시하는 기능이고

객체 prototype의 constructor를 살펴보아도 다른 것을 알 수 있다.

생성자 함수로 만든 객체

다른 방법으로 만든 객체

 

이를 통해서 생성자로 생성한 인스턴스임을 확인할 수 있다. 

 

또한

' instanceof '연산자를 이용해도 해당 객체가 생성자 함수에 의해 만들어졌는지를 확인할 수 있다.

console.log(player1 instanceof Player);
console.log(player2 instanceof Player);
console.log(player3 instanceof Player);

>>> true
>>> false
>>> false

 

 

3. 생성자 함수 자체의 필드와 함수

// 생성자 함수
function Player(name, job){
  this.name = name;
  this.job = job;
  this.info = function () {
    return `소환사명 : ${this.name} | 직업군 : ${this.job}`;
  }
}

// 생성자 자체에 프로퍼티 추가
Player.age = '23'
Player.attack = function(){
  return '공격!';
}

 

위와 같이 생성자 함수 자체에 새로운 프로퍼티를 추가한다.

이러한 방법을 사용한다면 어떤 점이 다를까?

 

 

먼저 생성자 함수 자체에도 점 연산자를 이용하여 접근할 수 있다.

// 생성자 함수 자체에 접근하기
console.log(Player.attack());

>>> 공격!

 

이번엔 생성자 함수의 인스턴스를 생성한 후 해당 함수에 접근해보자.

const player1 = new Player('Sally', '궁수');

// 일반 프로퍼티와 프로토토입에서 생성한 함수 각각 접근
console.log(player1.info());
console.log(player1.attack());

>>> 소환사명 : Sally | 직업군 : 궁수
>>> Uncaught TypeError: player1.attack is not a function

이처럼 기존의 일반 프로퍼티 함수에는 무리없이 접근이 가능하지만

프로토타입을 이용하여 새로 추가한 프로퍼티는 접근이 불가하다.

 

이러한 방식은 생성한 인스턴스들이 아닌

생성자 함수 자체에 필요한 기능을 만들때 주로 사용된다.

 

 

4. new 연산자 사용하지 않는 것 방지하기!

생성사 함수를 사용할 때 위에서 다뤘던 것처럼 new 연산자를 꼭 이용해야한다.

만약 사용하지 않는 경우 undefined를 반환한다.

 

하지만 이를 개발자가 설계시에 방지할 수 있는 방법이 있다.

바로 new.target을 이용하는 것이다!

 

new.taget은 생성자 함수로 만들어진 객체인 경우에 항상 함께 생성된다.

따라서 이것의 유무를 확인 후

없을 경우 new 연산자를 붙인 생성자 함수를 재귀호출하면 된다.

 

예시)

// 생성자 함수
function Player(name, job){
  this.name = name;
  this.job = job;
  this.info = function () {
    return `소환사명 : ${this.name} | 직업군 : ${this.job}`;
  }
  
  if (!new.target){
    return new Player(name, job);
  }
}

const p1 = new Player('Kassid', '전사');
const p2 = Player('Kassid', '전사');

위의 예시에서 p1은 생성자 함수를 new연산자와 함께 이용하였고 

p2는 그렇지 않은 잘못된 예시이다.

 

이를 확인해보자!

console.log(p1);
console.log(p2);

>>> Player {name: 'Kassid', job: '전사', info: ƒ}
>>> Player {name: 'Kassid', job: '전사', info: ƒ}

잘못 사용한 p2 역시 undefined가 아닌 생성자 함수로 만든 객체가 정상적으로 들어간 모습이다.