JavaScript Quick Bits: 계산된 메서드

객체의 계산된 키에 대해 알고 계실 것입니다. 하지만 단축 메소드를 사용하여 계산된 키를 사용할 수 있다는 사실을 알고 계셨나요? 아마도 이렇게 하고 싶지는 않을 것입니다. 그러나 할 수는 있습니다.

const methodName = 'myMethod';
const computedKey = 'computed';

const myObj = {
  // Computed Property
  [computedKey]: 'It worked!',

  // ? Is this a good idea? Probably not, no.
  // Computed property + Method shorthand
  [methodName]() {
    return this.computed;
  },
};

myObj.myMethod();
// 'It worked!'

역사 수업

초기 버전의 JavaScript에서는 함수가 모두 전역 범위에서 정의되었습니다. 그 당시에도 대괄호를 사용하여 계산된 값을 가져오거나 설정할 수 있었지만 우리가 생각하는 대부분의 기능은 사용할 수 없었습니다.

ECMA스크립트 3

ECMAScript 3에서는 함수 표현식과 객체 메서드를 제공했습니다. 대괄호 표기법을 사용하여 속성이나 메서드를 설정할 수 있습니다.

// Old JavaScript.
var computedKey = 'computed';

var myObj = {
  // Key and function separately.
  myMethod: function () {
    return this.computed;
  },
};

myObj[computedKey] = 'It worked!';

myObj.myMethod();
// 'It worked!'

원한다면 동적 메소드 이름을 가질 수 있었지만 객체가 생성된 후에 정의해야 했습니다.

myObj = {};
myObj[methodName] = function() {
  return this.computed;
};

ECMA스크립트 2015

ECMAScript 2015에서는 객체 메서드 단축 속성과 계산 속성을 모두 도입했습니다.

// Exciting new JavaScript!
const computedKey = 'computed';

const myObj = {
  // Method shorthand
  myMethod() {
    return this.computed;
  },
  // Computed Property
  [computedKey]: 'It worked!',
};

myObj.myMethod();
// 'It worked!'

MDN 기사에서 구체적으로 언급하지 않더라도 기사 시작 부분에 표시된 것처럼 계산된 속성 이름과 메서드 속기를 혼합할 수 있습니다.

문제

이 작업을 수행하는 것이 타당할 경우가 있을 수 있지만 일반적으로 이 기술은 피해야 합니다. 코드를 이해하려고 할 때 메서드를 찾기가 매우 어렵고 IntelliSense 및 유형 정보와 같은 코드 편집기 지원의 효율성이 감소합니다.

대안

해시 또는 프록시는 계산된 메서드 이름에 대한 좋은 대안이 될 수 있습니다. 이 작업을 수행할 수 있는 몇 가지 방법을 살펴보고 어떤 방법이 귀하에게 가장 적합할지 알려주세요!

공통코드

const methodName = 'myMethod';
const computedKey = 'computed';

const myObj = {
  getComputed() {
    return this.computed;
  },
  [computedKey]: 'It worked!',
};

일반 매핑

메서드 이름을 일치시키기 위한 간단한 문자열 맵에는 설정이 거의 필요하지 않지만 메서드 호출이 조금 더 어려워집니다.

const methodMap = {
  [methodName]: 'getComputed',
};

myObj[methodMap.myMethod]();
// 'It worked!';

바운드 매핑

원래 객체에 바인딩된 메소드가 있는 객체를 사용하려면 추가 설정이 필요하지만 소비자를 위한 코드가 단순화됩니다.

const methodMapBound = {
  [methodName]: myObj.getComputed.bind(myObj),
};

methodMapBound.myMethod();
// 'It worked!'

기본 프록시

프록시 개체는 프록시와 직접 상호 작용할 수 있으므로 대부분의 복잡성을 제거합니다. 이는 getter의 정적 검사를 사용하여 계산된 속성을 찾습니다.

const basicProxy = new Proxy(myObj, {
  get(target, prop, receiver) {
    if (prop === methodName) {
      return myObj.getComputed;
    }
    return Reflect.get(...arguments);
  },
});

basicProxy.myMethod();
// 'It worked!'

프록시 플러스 지도

일반 매핑 예제에서 속성 이름 map a를 사용하면 원하는 수의 메서드 매핑을 지원할 수 있습니다. 무한 루프의 약간의 위험을 감수할 의향이 있다면 실제로 다중 간접을 지원할 수 있습니다!

const methodMap = {
  [methodName]: 'getComputed',
  'thisIsWild': methodName,
};

const methodProxy = new Proxy(myObj, {
  get(target, prop, receiver) {
    if (methodMap[prop]) {
      // Using receiver allows multiple indirection
      return receiver[methodMap[prop]];
    }
    return Reflect.get(...arguments);
  },
});

methodProxy.myMethod();
// 'It worked!'

methodProxy.thisIsWild();
// 'It worked!'

결론

예상치 못한 JavaScript의 (희망적으로) 사용되지 않는 기능에 대해 간략하게 살펴보는 이 짧은 시간이 즐거웠기를 바랍니다!

위 내용은 JavaScript Quick Bits: 계산된 메서드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!