ES6 클래스 인스턴스의 클래스 이름을 가져옵니다.

ES6 클래스 인스턴스의 클래스 이름을 가져옵니다.

ES6 클래스 인스턴스에서 클래스 이름을 가져오는 '조화로운' 방법이 있습니까?이외에

someClassInstance.constructor.name

현재 저는 Traceur 구현을 기대하고 있습니다.그리고 바벨은 폴리필을 가지고 있는 것 같습니다.Function.name하지만 트레이서는 그렇지 않습니다.

요약하자면 ES6/ES2015/Harmony에는 다른 방법이 없었고, ES에는 ATM이 없을 것으로 예상됩니다.다음 분.

최소화되지 않은 서버 측 응용프로그램에 유용한 패턴을 제공할 수 있지만 브라우저/데스크톱/모바일용 응용프로그램에서는 원하지 않습니다.

Babel은 폴리필에 사용되며, Traceur 및 TypeScript 응용 프로그램에 대해 필요에 따라 수동으로 로드해야 합니다.

someClassInstance.constructor.name정확한 방법입니다.트랜스파일러는 이를 지원하지 않을 수 있지만 사양에 따라 표준 방식입니다.(그nameClassDeclaration 프로덕션을 통해 선언된 기능의 속성은 14.5.15, 6단계에서 설정됩니다.)

@이 말하듯이, @Domenic 말듯용, 다니합사이를 합니다.someClassInstance.constructor.name@에스테반은 댓글에서 다음과 같이 언급합니다.

someClassInstance.constructor는 함수입니다.에는 모든기는이 .name속성...

따라서 클래스 이름에 정적으로 액세스하려면 다음을 수행합니다(이것은 내 Babel 버전 BTW에서 작동합니다).@Domenic 마일리지는 변동될 수 있음)에 대한 의견에 따라 달라집니다.

class SomeClass {
  constructor() {}
}

var someClassInstance = new SomeClass();
someClassInstance.constructor.name;      // === 'SomeClass'
SomeClass.name                           // === 'SomeClass'

갱신하다

바벨은 괜찮았지만, 추잡함/분화는 결국 저에게 문제를 일으켰습니다.게임을 만들고 있으며 풀링된 스프라이트 리소스(키는 함수 이름)의 해시를 만들고 있습니다.최소화 후 모든 함수/클래스의 이름이 지정되었습니다.t이것은 해시를 죽입니다.는 사용중을 하고 있습니다.Gulp이 프로젝트에서는 gulp-uglify 문서를 읽은 후 로컬 변수/함수 이름 mangling이 발생하지 않도록 하는 매개 변수가 있다는 것을 발견했습니다.그래서, 나는 단숨에 파일을 바꿨습니다.

.pipe($.uglify()).pipe($.uglify({ mangle: false }))

여기에는 성능과 가독성의 균형이 있습니다.이름을 망가지지 않으면 빌드 파일이 (조금 더 많은 네트워크 리소스) 커지고 코드 실행 속도가 느려질 수 있습니다(인용 부호 필요 - BS일 수 있음). 제가 한다면, 으로 반에면내, 만그그유다지나수로, 것다할니입정의야해면으동는한대를 해야 할 것입니다.getClassName모든 ES6 클래스 - 정적 및 인스턴스 수준에서.아니요!

갱신하다

댓글로 토론이 끝난 후, 그것은 피한 것처럼 보입니다..name이러한 기능을 정의하는 것에 찬성하는 관습은 좋은 패러다임입니다.몇 줄의 코드만 있으면 되며, 라이브러리에서 사용하는 경우 코드를 완전히 축소하고 일반화할 수 있습니다. 것 요.getClassName내 수업에서.@estus 감사합니다!Getter/Setters는 특히 클라이언트 기반 애플리케이션에서 직접 변수 액세스와 비교할 때 일반적으로 좋은 아이디어입니다.

class SomeClass {
  constructor() {}
  static getClassName(){ return 'SomeClass'; }
  getClassName(){ return SomeClass.getClassName(); }
}
var someClassInstance = new SomeClass();
someClassInstance.constructor.getClassName();      // === 'SomeClass' (static fn)
someClassInstance.getClassName();                  // === 'SomeClass' (instance fn)
SomeClass.getClassName()                           // === 'SomeClass' (static fn)

클래스에서 직접 클래스 이름 가져오기

이전 답변은 다음과 같이 설명했습니다.someClassInstance.constructor.name클래스 이름을 문자열로 프로그래밍 방식으로 변환해야 하고 이를 위한 인스턴스를 만들지 않으려면 다음 사항을 기억하십시오.

typeof YourClass === "function"

그리고, 모든 기능은 다음을 가지고 있기 때문에.name속성, 클래스 이름으로 문자열을 얻는 또 다른 좋은 방법은 다음과 같습니다.

YourClass.name

다음은 이것이 왜 유용한지에 대한 좋은 예입니다.

웹 구성 요소 로드

MDN 설명서에서 알 수 있듯이 웹 구성 요소를 로드하는 방법은 다음과 같습니다.

customElements.define("your-component", YourComponent);

에▁where디YourComponent는 에서확클는니다입래에서 확장된 입니다.HTMLElement구성 요소의 클래스 이름은 구성 요소 태그 자체의 이름을 따서 지정하는 것이 좋습니다. 따라서 모든 구성 요소가 직접 등록하는 데 사용할 수 있는 도우미 기능을 작성하는 것이 좋습니다.다음은 그 기능입니다.

function registerComponent(componentClass) {
    const componentName = upperCamelCaseToSnakeCase(componentClass.name);
    customElements.define(componentName, componentClass);
}

이제 필요한 것은 다음과 같습니다.

registerComponent(YourComponent);

구성 요소 태그를 직접 작성하는 것보다 오류가 발생할 가능성이 적기 때문에 좋습니다.은 마막으로, 이은것입니다.upperCamelCaseToSnakeCase()함수:

// converts `YourString` into `your-string`
function upperCamelCaseToSnakeCase(value) {
    return value
        // first char to lower case
        .replace(/^([A-Z])/, $1 => $1.toLowerCase())
        // following upper chars get preceded with a dash
        .replace(/([A-Z])/g, $1 => "-" + $1.toLowerCase());
}

배벨 이동(소화 전)

을 Babel과 함께 ㅠㅠㅠㅠㅠ@babel/preset-env하지 않고 할 수 .constructor속성)

이 은 호이구브 할 수 .babel.config / babelrc:

{
  "presets": [
    ["@babel/preset-env", {"targets": {"browsers": ["> 2%"]}}]
  ]
}

에 대한 자세한 내용은 다음과 .targets: https://babeljs.io/docs/en/babel-preset-env#targets

배벨 최소화용(변압 후)

지금 당장은 쉬운 해결책이 없는 것 같습니다...우리는 망치는 제외사항을 살펴볼 필요가 있습니다.

클래스 구현을 제어할 수 있는 경우

제가 어떻게 하는지 알아내려고 할 때 구글의 맨 위였기 때문에 여기에 추가합니다.

이것은 노드에서 저에게 효과가 있는 것 같습니다.

./SuperClass.js

'use strict';

/**
 * A super class
 *
 * To show that it works with inheritance too
 *
 * In my usage, I'm also extending the Error class
 */
module.exports = class SuperClass extends Error {
    constructor(message, options = {}) {
        super(message);
        this.name = this.constructor.name;
        // ...other shared construction functionality
    }
};

./하위 클래스.js

'use strict';

const SuperClass = require('./SuperClass');
/**
 * a sub class
 */
module.exports = class SubClass extends SuperClass {
    constructor(message, options = {}) {
        super(message, options);
        // ... specific sub class construction functionality
    }
};

SubClass.name; // -> 'SubClass'
let instance = new SubClass('message');
instance.name; // -> 'SubClass'

분명히, 이것은 사용자가 전체 구현을 제어할 수 있는 클래스에서만 작동합니다.

저는 아마 그것을 바꿀 것입니다._name또는 다른 것이지만 이것은 제가 사용하고 있는 다른 라이브러리와 일치하도록 하기 위한 것입니다.

언급URL : https://stackoverflow.com/questions/29310530/get-the-class-name-of-es6-class-instance