내 머리속 JS - 생성자함수

JAEN·2020년 1월 18일
0

내머리속 JS 🙈

목록 보기
7/14

생성자함수

자바스크립트의 객체를 생성하는 역할

new 생성자(인자) :: 기존함수에 new 연산자를 붙여서 호출
함수이름 첫문자는 대문자!!!

1. 생성자 함수 동작방식

1. 빈 객체 생성 및 this 바인딩

① 코드 실행 전 빈 객체 새로 생성

자신의 부모인 프로토타입 객체와 연결되어 있어 부모 객체의 프로퍼티, 메서드를 자신의 것처럼 사용 가능하여 엄밀히 빈 객체는 아니라고 할 수 있다..

② this로 바인딩

생성자 함수 코드 내부에서 사용된 this는 빈객체를 가리킴 (<> 일반함수는 전역변수 가리킴)

[ 자바스크립트 규칙 ] ✽
생성자함수의 prototype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체로 설정

2. this를 통한 프로퍼티(속성) 생성

this를 통해 코드 내부에 동적으로 프로퍼티, 메서드 생성 가능

3. 생성된 객체를 리턴 :: this로 바인딩된 새로 생성된 객체가 반환

  • 일반 함수 : return undefined
  • 생성자함수 : return this :: this로 바인딩된 새로 생성한 객체 반환

 

2. 객체생성방식 :: 객체리터럴 vs 생성자함수

  • 같은 형태의 객체를 재생성할 수 없다. ( 인자로 같은 형태의 다른 객체 생성)
//생성자함수 정의
function MakeObj(pName) {
  this.name = pName;
  this.year = 2020;
}


let obj1 = { name: 'jaen' };		//{name: 'jaen'} <<< 재생성 불가!!!
let obj2 = new MakeObj('jaek');		//{name: 'jaek', year: 2020}
let obj3 = new MakeObj('young');	//{name: 'young', year: 2020}	
  • 바라보는 prototype이 다르다.
    - 일반함수 : Object()
    - 생성자함수 : 생성자함수의 prototype 객체

 

3. 일반함수 vs 생성자함수

만약, 생성자함수를 new 키워드 없이 그냥 호출한다면..? 🤭

① this 바인딩 방식

  • 일반함수 : 전역객체
  • 생성자함수 : 새로 생성한 빈 객체 (인스턴스)

② 리턴 값

  • 일반함수 : 정해져 있지 않을 경우 undefined
  • 생성자함수 : this에 바인딩된 객체
profile
Do myself first! 🧐

0개의 댓글