目前在ES5中，我们很多人在框架中使用以下模式来创建类和类变量，这很舒服:
// ES 5
FrameWork.Class({
variable: 'string',
variable2: true,
init: function(){
},
addItem: function(){
}
});
在ES6中，你可以在本地创建类，但是没有选项可以有类变量:
// ES6
class MyClass {
const MY_CONST = 'string'; // <-- this is not possible in ES6
constructor(){
this.MY_CONST;
}
}
遗憾的是，上述方法不起作用，因为类只能包含方法。
我知道我能做到。myVar = true在构造函数…但我不想'垃圾'我的构造函数，特别是当我有20-30+参数为一个更大的类。
我想了很多方法来处理这个问题，但还没有找到一个好的。(例如:创建一个ClassConfig处理程序，并传递一个参数对象，该对象与类分开声明。然后处理程序将附加到类。我也在考虑以某种方式集成WeakMaps。)
你会有什么样的想法来处理这种情况?
你可以模仿es6类的行为…并使用你的类变量:)
看妈妈……没有课!
// Helper
const $constructor = Symbol();
const $extends = (parent, child) =>
Object.assign(Object.create(parent), child);
const $new = (object, ...args) => {
let instance = Object.create(object);
instance[$constructor].call(instance, ...args);
return instance;
}
const $super = (parent, context, ...args) => {
parent[$constructor].call(context, ...args)
}
// class
var Foo = {
classVariable: true,
// constructor
[$constructor](who){
this.me = who;
this.species = 'fufel';
},
// methods
identify(){
return 'I am ' + this.me;
}
}
// class extends Foo
var Bar = $extends(Foo, {
// constructor
[$constructor](who){
$super(Foo, this, who);
this.subtype = 'barashek';
},
// methods
speak(){
console.log('Hello, ' + this.identify());
},
bark(num){
console.log('Woof');
}
});
var a1 = $new(Foo, 'a1');
var b1 = $new(Bar, 'b1');
console.log(a1, b1);
console.log('b1.classVariable', b1.classVariable);
我把它放到了GitHub上
在你的例子中:
class MyClass {
const MY_CONST = 'string';
constructor(){
this.MY_CONST;
}
}
因为MY_CONST是原始的https://developer.mozilla.org/en-US/docs/Glossary/Primitive，我们可以这样做:
class MyClass {
static get MY_CONST() {
return 'string';
}
get MY_CONST() {
return this.constructor.MY_CONST;
}
constructor() {
alert(this.MY_CONST === this.constructor.MY_CONST);
}
}
alert(MyClass.MY_CONST);
new MyClass
// alert: string ; true
但如果MY_CONST是引用类型，如静态get MY_CONST() {return ['string'];}警报输出是字符串，false。在这种情况下，删除操作符可以做到:
class MyClass {
static get MY_CONST() {
delete MyClass.MY_CONST;
return MyClass.MY_CONST = 'string';
}
get MY_CONST() {
return this.constructor.MY_CONST;
}
constructor() {
alert(this.MY_CONST === this.constructor.MY_CONST);
}
}
alert(MyClass.MY_CONST);
new MyClass
// alert: string ; true
最后对于非const类变量:
class MyClass {
static get MY_CONST() {
delete MyClass.MY_CONST;
return MyClass.MY_CONST = 'string';
}
static set U_YIN_YANG(value) {
delete MyClass.MY_CONST;
MyClass.MY_CONST = value;
}
get MY_CONST() {
return this.constructor.MY_CONST;
}
set MY_CONST(value) {
this.constructor.MY_CONST = value;
}
constructor() {
alert(this.MY_CONST === this.constructor.MY_CONST);
}
}
alert(MyClass.MY_CONST);
new MyClass
// alert: string, true
MyClass.MY_CONST = ['string, 42']
alert(MyClass.MY_CONST);
new MyClass
// alert: string, 42 ; true
正如Benjamin在他的回答中所说，TC39明确决定至少在ES2015中不包含这个功能。然而，共识似乎是他们将在ES2016中添加它。
语法还没有决定，但是ES2016已经有了一个初步的提议，允许你在一个类上声明静态属性。
多亏了巴别塔的魔力，你今天可以使用它。根据这些说明启用类属性转换，就可以开始了。下面是一个语法示例:
class foo {
static myProp = 'bar'
someFunction() {
console.log(this.myProp)
}
}
这个建议还处于非常早期的状态，所以准备好随着时间的推移调整您的语法。
