자바스크립트

생성자 함수가 동작하는 방식

devjones 2022. 1. 29. 15:26

new 연산자로 자바스크립트 함수를 생성자로 호출하면,

 

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

생성자 함수 코드가 실행되기 전 빈 객체가 생성된다. 바로 이 객체가 생성자 함수가 새로 생성하는 객체이며, 이 객체는 this로 바인딩된다. 따라서 이후 생성자 함수의 코드 내부에서 사용된 this는 이 빈 객체를 가리킨다.

하지만 여기서 생성된 객체는 엄밀히 말하면 빈 객체는 아니다. 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체와 연결되어 있으며, 이를 통해 부모 객체의 프로퍼티나 메서드를 마치 자신의 것처럼 사용할 수 있기 때문.

생성자 함수가 생성한 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체로 설정한다.

 

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

이후 this를 사용해서, 생성된 빈 객체에 동적으로 프로퍼티나 메소드 생성가능

 

3. 생성된 객체리턴

리턴문 없는 경우, this로 바인딩된 새로 생성한 객체가 리턴.

 

ex)

Person() 함수가 생성자로 호출되면 빈객체생성.

생성된 빈 객체는 Person() 생성자 함수의 prototype 프로퍼티가 가리키는 객체(Person.prototype 객체)를 [[Prototype]] 링크로 연결해서 자신의 프로토타입으로 설정.

그리고 이렇게 생성된 객체는 생성자 함수 코드에서 사용되는 this로 바인딩된다.

this가 가리키는 빈 객체에 name이라는 동적 프로퍼티 생성.

리턴이 없음: this로 바인딩한 객체가 생성자 함수의 리턴값으로 반환돼서, foo 변수에 저장.