본문 바로가기
Programing/Javascript

JavaScript Reflection 사용방법

by 멍멍돌이야 2022. 7. 7.
반응형

1. Reflection 무엇인가?

컴퓨터 프로그래밍에서 리플렉션은 런타임에 개체의 변수, 속성 및 메서드를 조작하는 프로그램의 기능입니다.

 

ES6 이전에 JavaScript에는 커뮤니티나 사양에서 공식적으로 호출하지 않았지만 이미 리플렉션 기능이 있습니다. 예를 들어 Object.keys(), Object.getOwnPropertyDescriptor() 및 Array.isArray()와 같은 메서드는 고전적인 리플렉션 기능입니다.

 

ES6에는 메서드를 호출하고, 객체를 구성하고, 속성을 가져오고 설정하고, 속성을 조작 및 확장할 수 있는 Reflect라는 새로운 전역 객체가 도입되었습니다.

 

Reflect API는 동적 코드를 처리할 수 있는 프로그램과 프레임워크를 개발할 수 있도록 해주기 때문에 중요합니다.

 

2. Reflect API

대부분의 전역 객체와 달리 Reflect는 생성자가 아닙니다. 이는 새 연산자와 함께 Reflect를 사용하거나 Reflect를 함수로 호출할 수 없음을 의미합니다. Math 및 JSON 객체와 유사합니다. Reflect 개체의 모든 메서드는 정적입니다.

  • Reflect.apply() – 지정된 인수로 함수를 호출합니다.
  • Reflect.construct() – 새 연산자처럼 작동하지만 함수로 작동합니다. new target(...args)을 호출하는 것과 같습니다.
  • Reflect.defineProperty() – Object.defineProperty()와 유사하지만 속성이 개체에 성공적으로 정의되었는지 여부를 나타내는 부울 값을 반환합니다.
  • Reflect.deleteProperty() – 삭제 연산자처럼 작동하지만 함수로 작동합니다. delete objectName[propertyName]을 호출하는 것과 같습니다.
  • Reflect.get() – 속성 값을 반환합니다.
  • Reflect.getOwnPropertyDescriptor() – Object.getOwnPropertyDescriptor()와 유사합니다. 속성이 개체에 있으면 속성의 속성 설명자를 반환하고 그렇지 않으면 정의되지 않은 속성을 반환합니다.
  • Reflect.getPrototypeOf() – Object.getPrototypeOf()와 동일합니다.
  • Reflect.has() – in 연산자처럼 작동하지만 함수로 작동합니다. 속성(소유 또는 상속)이 존재하는지 여부를 나타내는 부울을 반환합니다.
  • Reflect.isExtensible() – Object.isExtensible()과 동일합니다.
  • Reflect.ownKeys() – 객체의 소유 속성 키(상속되지 않음)의 배열을 반환합니다.
  • Reflect.preventExtensions() – Object.preventExtensions()와 유사합니다. 부울을 반환합니다.
  • Reflect.set() – 속성에 값을 할당하고 속성이 성공적으로 설정되면 true인 부울 값을 반환합니다.
  • Reflect.setPrototypeOf() – 객체의 프로토타입을 설정합니다.

Reflect API를 사용하는 몇 가지 예를 살펴보겠습니다.

 

3. Reflect.construct() 객체 생성하기

Reflect.construct() 메서드는 new 연산자처럼 작동하지만 함수로 작동합니다. 다른 프로토타입을 지정할 수 있는 새 target(...args)을 호출하는 것과 같습니다.

Reflect.construct(target, args [, newTarget])

Reflect.construct()는 대상의 새 인스턴스를 반환하거나 지정된 경우 newTarget을 반환합니다. 대상에 의해 지정된 배열과 유사한 객체 인수가 있는 생성자로 초기화됩니다. 다음 예를 참조하십시오.

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
};

let args = ['John', 'Doe'];

let john = Reflect.construct(
    Person,
    args
);

console.log(john instanceof Person);
console.log(john.fullName); // John Doe

Output:

true
John Doe

이 예에서:

  • 먼저 Person이라는 클래스를 정의합니다.
  • 둘째, 두 개의 문자열을 포함하는 args 배열을 선언합니다.
  • 셋째, Reflect.construct() 메서드를 사용하여 Person 클래스의 새 인스턴스를 만듭니다. john 객체는 Person 클래스의 인스턴스이므로 fullName 속성이 있습니다.

 

4. Reflect.apply() 함수 호출하기

ES6 이전에는 Function.prototype.apply() 메서드를 사용하여 지정된 this 값과 인수로 함수를 호출했습니다.

예를 들어 다음과같습니다.

let result = Function.prototype.apply.call(Math.max, Math, [10, 20, 30]);
console.log(result);

Output:

30

이 구문은 매우 복잡합니다.

 

Reflect.apply()는 Function.prototype.apply()와 동일한 기능을 제공하지만 덜 복잡하고 이해하기 쉽습니다.

let result = Reflect.apply(Math.max, Math, [10, 20, 30]);
console.log(result);

다음은 Reflect.apply() 메서드의 구문입니다.

Reflect.apply(target, thisArg, args)

 

5. Reflect.defineProperty() 속성 정의하기

Reflect.defineProperty()는 Object.defineProperty()와 비슷합니다. 그러나 예외를 throw하는 대신 속성이 성공적으로 정의되었는지 여부를 나타내는 부울을 반환합니다.

Reflect.defineProperty(target, propertyName, propertyDescriptor)

다음 예를 참조하십시오.

let person = {
    name: 'John Doe'
};

if (Reflect.defineProperty(person, 'age', {
        writable: true,
        configurable: true,
        enumerable: false,
        value: 25,
    })) {
    console.log(person.age);
} else {
    console.log('Cannot define the age property on the person object.');

}

이 튜토리얼에서는 JavaScript 리플렉션과 여러 리플렉션 메서드가 포함된 Reflect API에 대해 배웠습니다.

 

 

 

Referance: https://www.javascripttutorial.net/es6/javascript-reflection/

 

 

 

 

JavaScript Proxy 사용방법

1. JavaScript Proxy란 무엇인가? JavaScript Proxy는 다른 객체(target)를 감싸고 target 객체의 기본적인 동작을 가로채는 객체입니다. 기본 작업은 속성 조회, 할당, 열거 및 함수 호출 등이 될 수 있습니다.

5takoo.tistory.com

 

 

 

JavaScript Map 이란 무엇인가?

1. JavaScript Map 객체 소개 ES6 이전에는 키를 모든 유형의 값에 매핑하여 맵을 에뮬레이트하기 위해 객체를 자주 사용했습니다. 그러나 객체를 지도로 사용하면 몇 가지 부작용이 있습니다. 객체에

5takoo.tistory.com

 

 

 

728x90
반응형

댓글