자바스크립트 Reflect 객체와 히든클래스

00_8_3·2023년 2월 11일

reflect란

히든 클래스란

reflect의 메타데이터는 히든 클래스?

코드

node --inspect-brk --enable-source-maps ./src/index.js 실행 후 크롬
chrome://inspect 주소에서 진행.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
require("reflect-metadata");

function Animal(name) {
  Reflect.defineMetadata("key1", "value1", Animal, "baz2");
  Reflect.defineMetadata("key1", "value2", Animal, "baz1");
  this.name = name;
}
const a = new Animal("고양이");
const b = new Animal("강아지");
const c = new Animal("참새");
a.age = 1;
console.log(Reflect.getMetadata("key1", Animal, "baz2"));
console.log(Reflect.getOwnMetadata("key1", Animal, "baz2"));

DevTools 페이지가 열리면 Sources 페이지에서 a.age 줄에 Breakpoints를 걸어준다.

그 후 Memory 페이지에서 프로파일링을 하고 Object 이름을 검색.

스크린샷 1

스크린샷 2

데코레이터

TC39 Stage 3 이다.

만드는 법

function customDecorator(target: any, key: string) {
  let value = 10;
  Object.defineProperty(target, key, {
    get() {
      return value;
    },
    set(n: any) {
      value = n + 10;
    },
  });
}

class DataDefaultType {
  @customDecorator
  num: number = 0;
}

const test = new DataDefaultType();

console.log(`get : ${test.num}`); //  10
test.num = 30;
console.log(`get after set : ${test.num}`); // 40