모던자바스크립트 Deep Dive - 17장 생성자 함수에 의한 객체 생성

생성자 함수 : new 연산자와 함께 호출해 객체(인스턴스)를 생성하는 함수

- Object, String, Number, Boolean, Function, Array, RegExp, Date 생성자 함수 등이 있음 → 객체 생성❗️

new Object() /* 빈 객체 생성 */
new String() /* String 생성자 함수에 의한 String 객체 생성 */
new Number() /* Number 생성자 함수에 의한 Number 객체 생성 */

const a=new Boolean(true);
typeof a; /* object */

✅ 생성자 함수는 별다른 이유가 없다면 잘 사용하지 않음

❗️ 객체 리터럴에 의한 객체 생성 방식은, 구조가 동일함에도 같은 프로퍼티와 메서드를 기술해야 함 > 생성자 함수에 의한 객체 생성은 구조가 동일한 객체 여러개를 간편하게 생성 가능

function Circle(r){
  this.radius = r;
  this.getDiameter = function(){
    return 2*this.radius;
  }
}

const c1=new Circle(10);
const c2=new Circle(20);

console.log(c1.getDiameter()) // 20
console.log(c2.getDiameter()) // 40

 

생성자 함수는 반환하는 코드가 없음

-> new연산자와 생성자 함수 함께 호출 시 javascript engine이 암묵적인 처리로 인스턴스를 생성하고 반환함.

1. 인스턴스 생성과 this 바인딩

* 바인딩 : 식별자와 값을 연결하는 과정

2. 인스턴스 초기화

3. 인스턴스 반환

⇨ 명시적 반환값이 있는 경우 암묵적 this 반환이 무시됨! 따라서 생성자 함수 내에선 return문을 반드시 생략해야 함

function Circle(r){
  // 1. 암묵적으로 인스턴스 생성 + this 바인딩
  console.log(this); // Circle {}
  
  // 2. 인스턴스 초기화
  this.radius = r;
  this.getDiameter = function(){
    return 2*this.radius
  };
  // 3. 인스턴스 반환
}