ES6类变量替代品

目前在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。)

你会有什么样的想法来处理这种情况?

当前回答

那老派的方法呢?

class MyClass {
     constructor(count){ 
          this.countVar = 1 + count;
     }
}
MyClass.prototype.foo = "foo";
MyClass.prototype.countVar = 0;

// ... 

var o1 = new MyClass(2); o2 = new MyClass(3);
o1.foo = "newFoo";

console.log( o1.foo,o2.foo);
console.log( o1.countVar,o2.countVar);

在构造函数中，你只提到那些需要计算的变量。我喜欢这个特性的原型继承——它可以帮助节省大量内存(以防有很多从未分配的变量)。

2014-04-10 12:33:32

其他回答

ES7类成员语法:

ES7有一个“废弃”构造函数的解决方案。这里有一个例子:

车{ 轮子= 4; 重量= 100; ｝ const car = new car (); console.log(车。轮子,car.weight);

上面的例子在ES6中看起来如下所示:

车{ 构造函数(){ 这一点。轮子= 4; 这一点。重量= 100; ｝｝ const car = new car (); console.log(车。轮子,car.weight);

使用此语法时请注意，此语法可能不是所有浏览器都支持，可能必须转译为早期版本的JS。

好处:一个对象工厂:

函数generateCar(车轮，重量){ 车{ 构造函数(){} 轮子=轮子; 重量=重量; ｝返回新车(); ｝ const car1 = generateCar(4,50); const car2 = generateCar(6,100); console.log (car1。轮子,car1.weight); console.log (car2。轮子,car2.weight);

2018-11-20 18:28:11

2018年更新:

现在有一个第三阶段的提案——我期待着在几个月内让这个答案过时。

与此同时，任何使用TypeScript或babel的人都可以使用以下语法:

varName = value

在类声明/表达式体中，它将定义一个变量。希望在几个月或几周后，我能够发布更新。

更新:Chrome 74现在船与此语法工作。

ES wiki中关于ES6提案的注释(最大最小类)注意到:

(有意地)没有直接的声明性方法来定义原型数据属性(方法除外)类属性或实例属性类属性和原型数据属性需要在声明之外创建。在类定义中指定的属性被赋予与出现在对象字面量中相同的属性。

这意味着你的要求已经被考虑过了，并且被明确地否决了。

但是…为什么?

好问题。TC39的好人希望类声明能够声明和定义类的功能。不是它的成员。ES6类声明为用户定义了它的契约。

记住，类定义定义了原型方法——在原型上定义变量通常不是你要做的事情。当然，你可以使用:

constructor(){
    this.foo = bar
}

在构造函数中。另见共识摘要。

ES7及以上版本

ES7的一个新提议正在研究中，它允许通过类声明和表达式来实现更简洁的实例变量——https://esdiscuss.org/topic/es7-property-initializers

2014-04-10 11:20:03

Babel支持ESNext中的类变量，检查这个例子:

class Foo {
  bar = 2
  static iha = 'string'
}

const foo = new Foo();
console.log(foo.bar, foo.iha, Foo.bar, Foo.iha);
// 2, undefined, undefined, 'string'

2016-02-15 14:41:38

你可以模仿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上

2017-05-29 02:14:20

在你的例子中:

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

2015-10-15 07:35:21

ES6类变量替代品

推荐文章

最新文章

标签