target이 빈 객체인 이유

[코드팩토리] [초급] 8시간만에 끝내는 코드팩토리의 Typescript 완전정복 풀코스

Method Decorator (메서드 데코레이터)

작성

251

TestMethodDecorator 의 파라미터 target이 콘솔에 빈 객체로 찍히는 이유를 잘 모르겠는데 혹시 설명해주실 수 있으실까요?

클래스가 평가되어서 생성자 함수 객체가 생성되고, 생성자 함수 객체의 prototype 프로퍼티를 가지고 있는걸로 알고있는데

그러면 프로토타입 객체는 dance 메서드를 가지고 있는 객체가 콘솔로 찍혀야 하는 것이 아닌가 하고 생각하고 있었는데 빈 객체가 찍혀서 이유를 잘 모르겠습니다.

typescript

답변 1

코드팩토리

지식공유자

안녕하세요!

target === Idol.prototype을 출력해보면 true가 나옵니다.

하지만 prototype chain 강의를 다시 봐보시면 Idol.prototype은 dance 함수를 갖을 수 없습니다.

prototype이 오히려 체인의 위에 있기 때문입니다.

감사합니다!

정민교

질문자

코팩님 강의 프로토타입 체인 강의를 듣던 도중

console.dir(_ , {showHidden: true)

가 있다는 사실을 알게 되었고


class Idol {
    name: string;
    constructor(name: string) {
        this.name = name;
    }

    @TestMethodDecorator
    dance() {
        return `${this.name}가 춤을 춥니다.`;
    }
}

function TestMethodDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log(target === Idol.prototype);
    console.dir(target, {showHidden: true});
}

위와 같이 콘솔을 찍어봤습니다.

위와 같이 Idol.prototype 객체가 dance 함수를 가지는 게 맞는 것 같은데 아닌가요..?

정민교

질문자

prototype 객체의 프로퍼티들이 숨겨져 있어서 보여주지 않는다는 사실은 몰랐습니다.

코팩님 자바스크립트 강의를 보고 알게되었네요

코드팩토리

지식공유자

아 죄송합니다 제가 거꾸로 생각했습니다. property function으로 선언하면 인스턴스에 귀속되고 method로 선언하면 prototype에 귀속되는게 맞습니다! 아래 예제 첨부 해드립니다!

class Test{
  propertyFunction = function(){

  }

  methodFunction(){

  }
}

const instance = new Test();

console.dir(Test.prototype, {showHidden: true})

출력엔 methodFunction만 존재합니다!

정민교

질문자

답변 감사합니다!

인프런 커뮤니티 질문&답변

target이 빈 객체인 이유