생성자 함수

생성자 함수

-> new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말함

-> 생성자 함수에 의해 생성된 객체를 인스턴스라고 한다.

 

Object 생성자 함수 , 다양한 빌트인 생성자 함수(String ~ Data, Promise)

const person=new Object();

person.name='Hi'
person.age=11

console.log(person);

{ name: 'Hi', age: 11 }

const strObj=new String('hi')

console.log(typeof(strObj))
console.log(strObj);

const numObj=new Number(10)

console.log(numObj);

object
[String: 'hi']
[Number: 10]

직관적이고 간편한 생성 방식, 하지만 여러개의 객체를 생성할 때 비효율적

 

객체는 프로퍼티를 통해 고유의 상태(state)를 표현하고 메서드를 통해서 프로퍼티를 참조하고 조작하는 동작을 표현함

 

생성자 함수

인스턴스 생성

인스턴스 초기화( 옵션 ) -> 엔진에 의해 암묵전인 처리 (인스턴스 생성후 반환)

 

아래 코드처럼 생성자 함수내  this를 찍어보면 빈 객체가 나오는것을 확인할수있다.

이 빈 객체가 생성자 함수가 생성한 인스턴스고 인스턴스는 this에 바인딩된다.

바인딩은 말 그대로 식별자와 값을 연결하는 과정이다.

인스턴스를 초기화 할때 this에 바인딩되어있는 인스턴스를 초기화 하는것이다.

this에 바인딩 되어있는 인스턴스는 개발자가 다룬다.

생성자 함수 내부의 모든 처리가 끝나면 바인딩된 this가 암묵적으로 반환된다.

 

네이밍규칙은 파스칼 케이스(대문자)

new만 붙여주면 생성자함수가 될수있기 때문에 네이밍 규칙이 존재

function Square(r){
  console.log(this) // Square()
  this.r=r,
  this.getSide=()=>{
    return this.r*this.r
  }
}

const sq1=new Square(5);
const sq2=new Square(10);


console.log(sq1.getSide())
console.log(sq2.getSide());


25
100

new가 없을시
일반 함수로 호출
const sq1=Square(10);
console.log(sq1) // undefined
이때 this는 전역 객체를 가리킨다.
console.log(r) // 10

만약 괄호를 빼면?
console.log(sq1.getSide);

[Function (anonymous)]

생성자 함수내부에 return문은 생략하라

명시적으로 다른 객체를 반환하면 this는 반환되지 않는다

원시값으로 반환시 무시하고 this가 반환된다.

function Square(r){
  console.log(this);
  this.r=r,
  this.getSide=()=>{
    return this.r*this.r
  }
  return {}
}
-----------------------------------
function Square(r){
  console.log(this);
  this.r=r,
  this.getSide=()=>{
    return this.r*this.r
  }
  return 10
}

this

this는 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수다.

함수 호출 방식	this가 가리키는 값(this 바인딩)
일반 함수로서 호출	전역 객체
메서드로서 호출	메서드를 호출한 객체
생성자 함수로서 호출	생성자 함수가 생성할 인스턴스

 

내부 메서드 [[Call]],[[Contruct]]

함수는 객체라는 것을 알고 있을 것이다. 하지만 일반 객체와 달리 함수는 호출이 가능하다.

함수는 객체면서 호출가능한 특징을 가지기 위해 추가된 내부 메서드를 가진다

[[Call]] - 함수 객체 callable 호출가능 함수

[[Contruct]] - 함수 객체 constructor 생성자 함수

-모든 함수는 callable이지만 constructor은 아님-

constructor를 가지고 있을수 있는 함수는 일반함수, 함수 선언문과 함수 표현식으로 정의된 함수다.

 

[생성자 함수가 new 연산자 없이 호출 되는 경우 방지]

new.target

constructor인 모든 함수 내부에 암묵적인 지역 변수와 같이 사용 -> 메타 프로퍼티

function Pow(a){
Pow 함수가 new 연산자와 같이 호출X -> new.target은 undefined로 나오기에 아래 if문으로 undefined일때
생성자 함수로 만들어서 return 시킴
  if(!new.target){ 
    return new Pow(a)
  }
  this.a=a;
  this.getValue=()=>{
    return this.a*this.a
  }
}

const pow=Pow(10) 내부에 설정을 해줬기에 new없이도 생성자 함수로 작동함
console.log(pow.getValue()); 100출력

스코프 세이프 생성자 

if(!(this instanceof Pow)){
    return new Pow(a)
  }

instanceof는 생성자의 prototype 속성이 객체 prototype 체인 어딘가 존재하는지 판별하는 연산자

-> bool값으로 나옴

Pow함수는 this에 바인딩되어서 프로토타입 체인을 생성하고 instanceof로 확인해서 있으면 true 없으면 false