[FE/JavaScript] new의 동작방식

📌 new의 동작방식

자바스크립트에서는 new 연산자를 통해 함수를 생성자로 호출할 수 있고 그에 따라 새로운 객체를 생성할 수 있다. 다음과 같은 과정으로 이루어진다.

1. 빈 객체를 생성한다.
2. [[Prototype]] 속성을 생성자 호출할 함수의 prototype 속성으로 지정한다.
3. 객체를 생성하고 이 객체를 this로 지정한다.
4. 함수를 호출하고 해당 함수의 this로 위에서 지정한 객체를 사용한다.
5. 함수의 리턴값이 원시값이라면 새로 만들어진 객체가 리턴되고 리턴값이 객체라면 해당 객체가 리턴된다.

이를 코드로 보면 다음과 같다.

function Func() {}
const f = new Func();

1. 빈 객체 생성 {}
2. 해당 객체의 [[Prototype]] 을 Func.prototype으로 지정
3. 이 객체의 this 로 지정
4. Func() 을 호출하고 이 함수에서 this 를 위 객체로 지정
5. 함수의 리턴값이 undefined 원시값이므로 생성한 객체를 리턴

출처

What is the 'new' keyword in JavaScript?