오늘 배운 것

New 연산자

new 연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다.

참조 : MDN

OOP(객체지향프로그래밍)을 배우고 있다. 자바스크립트는 Prototype기반 언어이고, 상속(Inheritance)을 위해 Prototype을 활용하고 있기 때문에 prototype과 class, new에 대한 개념을 짚고 가고 싶었다. Prototype과 class는 지난 포스팅에서 다루었고, 이번에는 생성자 함수를 통해 인스턴스를 만드는데 꼭 필요한 연산자인 new에 대해 알아볼 것이다.

• 우선 사용자 정의 객체를 생성하는데에는 두 단계가 필요하다.
  1. 생성자 함수를 만들어야 하고
  2. new연산자로 객체의 인스턴스를 생성하면 된다.

function Person(name){
    this.name = name;
}
//Person 생성자 함수 생성

let mike = new Person("mike");
//new 연산자로 객체의 인스턴스를 생성

console.log(mike) //{name:"mike"}

• 위의 코드 new Person("mike")이 실행될 때 다음과 같은 일이 발생한다.
  1. Person.prototype을 상속하는 객체가 하나 생성된다.
  2. 명시된 인자(여기선 "mike" )와 함께 새롭게 생성된 객체(Person.prototype을 상속하는 그 객체)를 this를 바인딩해서 생성자 함수 Person를 호출한다.
• 과정을 좀 더 자세히 살펴보자면 (위 케이스의 경우)
  1. 우선 Person.prototype을 상속받는 새로운 객체 mike = {}를 만든 다음, this를 이 객체와 바인딩해서 Person 생성자 함수에 명시된 인자("mike") 와 함께 호출한다.
  2. 1번 과정은 Person.call(mike,"mike")과 비슷할 것 같다.
  3. 다만 new 연산자를 사용한 것(let mike=new Person("mike")와 `1. let mike = {} 2. Person.call(mike, "mike")를 사용한 것의 차이는 이를 통해 생성된 객체가 Person.prototype을 상속받느냐 아니냐의 차이인 것 같다. __proto__를 통해 살펴보면 전자는 Person.prototype객체를 상속받고, 후자는 아닌 것을 알 수 있다.
  4. 최종 결과는 {name :"mike"}이고, mike.__proto__ === Person.prototype이 된다