使用BabelJS 6访问类的静态属性

本文介绍了使用BabelJS 6访问类的静态属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

下面是演示该问题的最小应用程序:

Below is the minimal app which demonstrate the issue:

'use strict'; var _ = require('underscore'); class Model { constructor(value) { this._value = value; } get value() { return this._value; } toJS() { return this.value; } } class ObjectModel extends Model { static properties = {}; constructor(value) { super(_.extend({}, new.target.properties, _.pick(value, _.keys(new.target.properties)))); } } class PostModel extends ObjectModel { static properties = { title: 'Hello' /* content: '<p>Lorem ipsum dolor sit amet</p>' */ }; } console.log(new PostModel({title: 'Nice day', aa: 11, bb: 22}).toJS());

它应该产生{title: 'Nice day'}.相反，它甚至无法编译.我明白了:

It should produce {title: 'Nice day'}. Instead it even not compiles. I get this:

$ babel app.js SyntaxError: app.js: 'this' is not allowed before super()

我了解为什么要对对象属性执行此操作.但是我不明白为什么还要对类变量执行此操作.

I understand why this was done for object properties. But I can't understand why this also was done for class variables.

在BabelJS 5中，我使用了完成这项工作的技巧:

In BabelJS 5 I used this trick which did the job:

class ObjectModel extends Model { static properties = {}; constructor(value) { if (0) { super(); } super(_.extend({}, this.constructor.properties, _.pick(value, _.keys(this.constructor.properties)))); } }

在版本6中，它会编译，但是在运行时会产生错误:

In version 6 it compiles, but when running it produces an error:

Uncaught TypeError: Cannot read property 'constructor' of undefined

在调用super之前是否有某种方法可以访问类的静态变量?不能使用init()之类的东西代替constructor.也许创建自定义转换插件?

Is there some way to get access to a class static variables before calling super? Using something like init() instead of a constructor is not an option. Maybe creating custom transformation plugin?

系统详细信息:

$ babel --version 6.2.0 (babel-core 6.2.1) $ cat .babelrc { "presets": ["es2015", "stage-1"] } $ babel-doctor Babel Doctor Running sanity checks on your system. This may take a few minutes... ✔ Found config at /path/to/.babelrc ✔ No duplicate babel packages found ✔ All babel packages appear to be up to date ✔ You're on npm >=3.3.0 Everything looks all right!

推荐答案

解决方案如下:

按照 @ sjrd 和 @loganfsmyth : class ObjectModel extends Model { static properties = {}; constructor(value) { super(_.extend({}, new.target.properties, _.pick(value, _.keys(new.target.properties)))); } }

创建一个将所有new.target(ES6)转换为this.constructor(ES5)的编译器:

Create a transpiler which converts all of new.target (ES6) into this.constructor (ES5):

function transpileNewTarget() { return { visitor: { MetaProperty(path) { if (path.isMetaProperty() && path.node.meta.name == 'new' && path.node.property.name == 'target') { path.replaceWithSourceString('this.constructor'); } } } }; }