Front-end/JavaScript

[JS] new 연산자

파리외 개발자 2022. 8. 20. 19:10

위와 같이 객체를 생성할 때 new 를 쓰곤 한다.
여기서 new 연산자의 내부 동작에 대해 알아본다.

 

new 사용

멤버 변수 2개와 그 수를 더해주는 메서드를 정의했다.

이제 정의한 Add에 1과2를 인자로 가져가는 add 객체를 생성한다.

add객체에는 a에 1, b에 2가 들어가있으므로 plus메서드를 호출하면 3이 값으로 나온다.

 

new 미사용

new 연산자를 사용하지 않고 newadd객체로 같은 결과를 보이도록 해본다.

js 객체에는 proto속성이 있는데 그 속성을 Add의 prototype객체를 참조하도록 연결해준다.

이렇게 하면 newadd는 Add를 상속받게 된다.

 

apply메서드는 this객체와 배열을 전달하는데,

Add에 newadd객체에 인자 1,2를 전달하는 것과 같다.

따라서 newadd.plus를 호출한다면(상속을 받았으므로 plus메서드 호출가능)

전달받은 newadd객체의 1,2를 더해서 3을 출력하게 된다.

 

new 연산자의 정체

add와 newadd의 결과물은 완전히 같다. 과정만이 다를 뿐

그러므로 여기서 new 연산자가 정확히 어떤 역할을 하는 지 알 수 있다.

  • 객체를 정의하고,
  • 상속받을 개체의 프로토타입 객체를 상속받는다.
  • 그 후, 공통부를 사용하되 인스턴스 객체의 이름으로 된(apply의 첫 인자인 this 객체) 공간을 가진다.

new연산자는 위의 복잡한 과정을 한번에 처리해준다.