ES5의 생성자 함수

자바스크립트를 처음 공부하기 시작했을 때는 ES6였고, 그때부터 나는 ES5에대하여 크게 신경을 쓰지 않고  ES6 문법을 기초로 하여 현재까지 공부를 해왔다. 

그러다 나는 우연히 특정 코딩 테스트의 문제를 보게 되었다.

근대 해당 문제에서 함수에서 this와 prototype을 사용하면서 마치 클래스처럼 사용하고 있었다. 

물론 나는 이게 뭐지? 라는 생각을 갖고 모던 자바스크립트 Deep Dive 책을 찾아보게 되었고, 나는 그것이 생성자 함수라는 것을 알게되었다. 

생성자 함수가 ES6로 넘어오면서 단점을 보완하여 나온것이 Class였다. 

ES5 생성자 함수

var Person = (function (){
  function Person(name){
    this.name = name;
  }
  
  Person.prototype.sayHi = function(){
    console.log('Hi'+this.name);
  }
  
  retrun Person;
}());

var me  = new Person('KIM');
me.sayHi();

기본적으로 생성자 함수는 첫 글자를 대문자로 작성해야하는 암묵적인 규칙이 존재한다. 

Class와 생성자 함수를 비교해봤을 떄 먼저 생성자(constructor)가 없는 것을 알 수 있다. 그리고 프로토타입을 사용하여 메서드를 추가하는 것을 볼 수 있다.

그리고 제일 큰 차이점이라고 할 수 있는 것은 바로 this이다.

먼저 생성자 함수에서 의 this는 아래와 같다.

함수 호출 방식	this 바인딩
일반 함수에서의 this	전역 객체
메서드에서의 this	메서드를 호출한 객체
생성자 함수에서의 this	생성자 함수가 생성할 인스턴스

하지만 몇몇 경우에 따라 this의 값이 바뀌게 된다. 

예를 들어 생성자 함수에서 for문을 사용하게 된다면 for문에서의 this는 인스턴스를 가르키는 것이 아닌 반복되는 대상을 가르키게 된다. 

그렇기 때문에 이러한 현상을 해결하기 위해 bind 라는 것이 존재하게 된다. 

function (){}.bind(this)

 예를 들어 위처럼 작성해주게 된다면 해당 함수내의 this가 우리가 bind에서 작성한 this로 강제 형변환이 된다. 

이처럼 this를 강제로 바꾸는 것은 위험하기 때문에 es6에서는 bind함수로 강제로 형변환을 해야하는 단점을 화살표 함수를 통해 해결해서 나오게 된다.