생성자 함수의 문법적 설탕이다.

생성자 함수

클래스 대신 생성자 함수로도 인스턴스를 생성할 수 있다.
생성자 함수를 청사진, 인스턴스를 청사진을 기준으로 만든 물체라 생각하자.

ex) 생성자 함수: 자동차 설계 도면, 인스턴스: 자동차

new 연산자로 선언하면 일반 함수가 아니라 생성자 함수가 된다.
이때 함수 내부에서 자동으로 this 객체가 생성되고, 인스턴스와 바인딩된다.
인스턴스는 this 객체를 리턴값으로 받는다.

아래 코드처럼 return 값을 명시하면 this 객체 대신 명시한 객체가 리턴된다.

prototype 객체

클래스를 이해하기 위해 필요한 개념이다.
prototype 객체는 생성자 함수가 만들어질 때 같이 만들어지는 객체다.

  • 생성자 함수, prototype 객체, 인스턴스 관계


    내부 슬롯은 자바스크립트 엔진 만이 사용할 수 있는 코드다.
    그러나 [[ Prototype ]]과 같이 getter/setter 접근자 프로퍼티를 제공하는 경우도 있다.
    참고로 prototype 객체와 Prototype 내부 슬롯은 다른 개념이다.

  • prototype 객체 사용 이유

    isdebrave 인스턴스와 markus 인스턴스가 동일한 sayHi 함수를 가지고 있다.

    이는 비효율적인 방법이다.
    그래서 우린 prototype 객체에 sayHi를 넣어 공유하고자 한다.

    isdebrave 인스턴스와 markus 인스턴스가 sayHi 함수를 공유한다.

    isdebrave 인스턴스와 markus 인스턴스가 Person 생성자 함수의 prototype 객체를 상속 받는 모습을 볼 수 있다.

prototype 객체 심화

  • prototype 체인
    자바스크립트를 prototype 기반 언어라고도 부르는데 이는 빌트인 객체들을 prototype 체인으로 상속 받기 때문이다.


    최상위 객체에는 항상 Object.prototype 객체가 존재한다.

  • 중요한 메서드들
    • Object.getPrototypeOf, Object.setPrototypeOf
    • Object.prototype.hasOwnProperty
    • Object.getOwnPropertyDescriptor, Object.getOwnPropertyDescriptors
      value: 값
      writable: 프로퍼티 변경 가능 여부
      enumerable: 열거 가능 여부
      configurable: attributes 변경 가능 여부

  • 중요한 연산자들

    • instanceof
      인스턴스가 prototype 체인을 타고 올라가서 constructor 메서드를 실행했을 때, 생성자 함수가 존재하면 true, 존재하지 않으면 false를 반환한다.

    • in
      객체 안에 프로퍼티가 존재하는지 확인할 때 사용한다.
      상속 받은 프로퍼티도 포함이다.

    • for...in문
      프로퍼티들을 열거한다.
      단, 상속 받은 프로퍼티는 enumerable이 true여야 열거된다.

클래스

  • 생성자 함수와의 비교
    정적 메서드의 경우, 인스턴스의 name 변수를 참조할 수 없어서 함수의 name 프로퍼티를 사용하기 때문에 Bye, Person 으로 출력된다.



    내부적으로 동작 방법이 다를 뿐, 개념적으로 동일한 모습을 볼 수 있다.

  • 클래스 필드
    constructor 내부 말고, 클래스 몸체를 말한다.
    여기에 선언한 변수는 this 객체와 바인딩된다.


  • extends와 super
    클래스의 가장 큰 장점은 상속이 가능하다는 점이다.

    만약 매개변수를 전달하고 싶으면 super 키워드를 사용해야 한다.
    위의 경우도 super가 암묵적으로 사용되지만 생략된 케이스다.

    반드시 super를 먼저 호출해야 한다.
    서브 클래스(Residence)는 수퍼 클래스(Person)가 생성한 this 객체와 바인딩되기 때문이다.
profile
Software Engineer

0개의 댓글