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。)

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

当前回答

我解决这个问题的方法，这是另一个选择(如果你有jQuery可用)，是在一个老式的对象中定义字段，然后用该对象扩展类。我也不想在构造函数中添加赋值，这似乎是一个整洁的解决方案。

function MyClassFields(){
    this.createdAt = new Date();
}

MyClassFields.prototype = {
    id : '',
    type : '',
    title : '',
    createdAt : null,
};

class MyClass {
    constructor() {
        $.extend(this,new MyClassFields());
    }
};

——根据Bergi的评论更新。

没有JQuery版本:

class SavedSearch  {
    constructor() {
        Object.assign(this,{
            id : '',
            type : '',
            title : '',
            createdAt: new Date(),
        });

    }
}

你仍然会得到“胖”构造函数，但至少它都在一个类中，并在一次命中赋值。

编辑# 2: 我现在已经走了一圈，现在在构造函数中赋值，例如。

class SavedSearch  {
    constructor() {
        this.id = '';
        this.type = '';
        this.title = '';
        this.createdAt = new Date();
    }
}

为什么?真的很简单，使用上面的加上一些JSdoc注释，PHPStorm就能够在属性上执行代码补全。在一次命中分配所有的变量是很好的，但无法编码完成属性，在我看来，不值得(几乎肯定是微乎其微的)性能收益。

2017-05-10 22:13:03

其他回答

在你的例子中:

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

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

只需定义一个getter。

MyClass类｛ get MY_CONST(){返回'string';｝构造函数() ｛ console.log ("MyClass MY_CONST:"， this.MY_CONST); ｝｝ var obj = new MyClass();

2020-12-14 14:30:15

只是补充一下本杰明的答案——类变量是可能的，但你不会使用原型来设置它们。

对于一个真正的类变量，你应该像下面这样做:

class MyClass {}
MyClass.foo = 'bar';

在类方法中，该变量可以通过this.constructor.foo(或MyClass.foo)访问。

这些类属性通常不能被类实例访问。即MyClass。foo给出'bar'但新的MyClass()。Foo没有定义

如果你也想从实例中访问你的类变量，你必须另外定义一个getter:

class MyClass {
    get foo() {
        return this.constructor.foo;
    }
}

MyClass.foo = 'bar';

我只在Traceur上测试过这个功能，但我相信它在标准实现中也能发挥同样的作用。

JavaScript实际上没有类。即使在ES6中，我们看到的是基于对象或原型的语言，而不是基于类的语言。在任何函数X(){}中，X.prototype.constructor都指向X。当在X上使用new操作符时，将创建一个继承X.prototype的新对象。新对象中任何未定义的属性(包括构造函数)都将从那里查找。我们可以把这看作是生成对象和类属性。

2014-07-30 11:51:31

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

ES6类变量替代品

推荐文章

最新文章

标签