[英]Get access to the class static properties using 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());
It should produce {title: 'Nice day'}
. 它应产生{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. 但是我不明白为什么还要对类变量执行此操作。
In BabelJS 5 I used this trick which did the job: 在BabelJS 5中,我使用了这个技巧来完成工作:
class ObjectModel extends Model
{
static properties = {};
constructor(value) {
if (0) { super(); }
super(_.extend({}, this.constructor.properties, _.pick(value, _.keys(this.constructor.properties))));
}
}
In version 6 it compiles, but when running it produces an error: 在版本6中,它可以编译,但是在运行时会产生错误:
Uncaught TypeError: Cannot read property 'constructor' of undefined
Is there some way to get access to a class static variables before calling super
? 在调用super
之前,有什么方法可以访问类的静态变量? Using something like init()
instead of a constructor
is not an option. 不能使用init()
类的东西代替constructor
。 Maybe creating custom transformation plugin? 也许创建自定义转换插件?
System details: 系统细节:
$ 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!
The solution was following: 解决方案如下:
Stick to the new.target
as suggested by @sjrd and @loganfsmyth : new.target
@sjrd和@loganfsmyth的建议, 坚持 new.target :
class ObjectModel extends Model { static properties = {}; constructor(value) { super(_.extend({}, new.target.properties, _.pick(value, _.keys(new.target.properties)))); } }
Create a transpiler which converts all of new.target
(ES6) into this.constructor
(ES5): 创建一个将所有new.target
(ES6)转换为this.constructor
(ES5)的new.target
:
function transpileNewTarget() { return { visitor: { MetaProperty(path) { if (path.isMetaProperty() && path.node.meta.name == 'new' && path.node.property.name == 'target') { path.replaceWithSourceString('this.constructor'); } } } }; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.