2017-03-07 2 views
3
내가 그렇게 내 ES6 코드의 코드 생성기를 작성한 동적으로 클래스를 정의 할 필요가

:가 ES6 리터럴 템플릿 구문을 확산하여

function makeClass(className, baseClass = _DefaultBaseClass, ...args) { 
    return (
    eval(` 
     class ${className} extends ${baseClass} { 
     constructor(${...args}) { 
      super(${...args}) 
     } 
     } 
    `) 
) 
} 

'_DefaultBaseClass'위 발전기 기능 논리를 단순화하는 데 사용되는 빈 클래스는 다음과 같습니다

class _DefaultBaseClass() { 
    constructor() {} 
} 

퍼짐 연산자를 제외하고 모든 것이 제너레이터 코드에서 잘 작동합니다. 이 예제에서는 스프레드 연산자 자체가 템플릿 리터럴 외부의 프로젝트에서 제대로 작동합니다.

저는 '반응', 'es2015', 'stage-2', 'transform-runtime'과 같은 webpack 바벨 프리셋을 사용하고 있습니다.

+0

간단하게 만 super'은'부르고 때이'모두 constructor' 떨어 뜨리지 왜 - 기본 생성자는 어쨌든 – Bergi

+1

을한다 [ **'... '은 연산자가 아닙니다 **] (http://stackoverflow.com/questions/37151966/what-is-spreadelement-in-ecmascript-documentation-is-it-the-same-as-spread -oper/37152508 # 37152508). 배열 리터럴, 함수 정의, 함수 호출 및 배열 소멸 할당 구문의 일부입니다. 그것은 독립 실행 형 것이 아닙니다. '...'는 템플릿 리터럴의 일부가 아닙니다. –

+0

@FelixKling 정보를 제공해 주셔서 감사합니다; 매우 도움이됩니다. – Ethan

답변

2

의견에서 언급 한 바와 같이 ...는 특정 사용 사례에만 적용됩니다. ${...args}은별로 의미가 없습니다. 그 결과는 무엇이되어야 하는가? 예 : ${...args}${args[0],args[1]}과 같으면 여기의 값으로 계산됩니다. 여기에서 ,은 쉼표 연산자입니다.

템플릿 리터럴은 임의의 표현식을 포함 할 수 있습니다, 그래서 당신은 다음과 같은 작업을 수행 할 수

`${args.join(",")}` 
+0

답/통찰력에 감사드립니다. '$ {... args} '를 사용하려는 내 생각에 대한 생각은'makeClass' 함수 본문에서'args'는 배열입니다. 따라서 생성자에 대한 여러 입력을 얻기 위해'... '구문을 사용하여 평가 섹션에 배열을'퍼뜨릴 수 있어야한다고 생각했습니다. 쉼표 연산자에 대한 귀하의 요점은 매우 도움이됩니다. – Ethan