使用BabelJS6访问类静态属性
Get access to the class static properties using BabelJS 6
下面是演示该问题的最小应用程序:
'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'}
。相反,它甚至不编译。我得到这个:
$ babel app.js
SyntaxError: app.js: 'this' is not allowed before super()
我理解为什么要对对象属性执行此操作。但我不明白为什么对类变量也这样做。
在BabelJS 5中,我使用了这个技巧:
class ObjectModel extends Model
{
static properties = {};
constructor(value) {
if (0) { super(); }
super(_.extend({}, this.constructor.properties, _.pick(value, _.keys(this.constructor.properties))));
}
}
在版本6中,它进行编译,但运行时会产生错误:
Uncaught TypeError: Cannot read property 'constructor' of undefined
在调用super
之前,是否有某种方法可以访问类静态变量?使用类似init()
的东西而不是constructor
不是一个选项。也许正在创建自定义转换插件?
系统详细信息:
$ 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和@loganofsmisth:的建议,坚持
new.target
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)的转发器:function transpileNewTarget() { return { visitor: { MetaProperty(path) { if (path.isMetaProperty() && path.node.meta.name == 'new' && path.node.property.name == 'target') { path.replaceWithSourceString('this.constructor'); } } } }; }
相关文章:
- 如何在ES Next中扩展静态属性
- JsDoc:删除“;静态“;来自属性的标记
- GoogleMaps API:如何将geoJSON属性与信息框中的静态文本连接起来
- 为什么要在函数定义之外引用静态变量(函数属性)
- 带有属性装饰器的 TypeScript 类就像静态一样
- 从JavascriptMVC中的静态方法中获取静态属性的值
- 静态属性不起作用
- 使用BabelJS6访问类静态属性
- 在 React.js 中覆盖/扩展 ES7 类的静态属性
- 为什么这个静态属性没有定义?如何在Javascript中访问静态属性
- Javascript es6覆盖静态属性
- TypeScript嵌套静态属性
- 如何存储变量:特权方法,静态属性
- Javascript:如何访问静态属性
- 在创建项目时获取Ext.Container的静态属性
- 静态属性创建优化
- 将this.constructor与构造函数调用一起使用以访问静态属性时是否存在兼容性问题
- 为什么我不能使用“name”呢?javascript / nodeJS中的静态属性
- CoffeeScript中未定义静态属性的问题
- 如何将静态属性添加到 ES6 类