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;
    }
}

悲しいことに、クラスにはメソッドしか含めることができないため、上記は機能しません。

できることthis.myVar = trueは理解していconstructorますが、特に大きなクラスに20〜30以上のパラメーターがある場合は、コンストラクターを「ジャンク化」したくありません。

私はこの問題を処理する多くの方法を考えていましたが、まだ良いものを見つけていません。（例：ClassConfigハンドラーを作成parameterし、クラスとは別に宣言されているオブジェクトを渡します。次に、ハンドラーがクラスにアタッチされます。WeakMapsどういうわけか、統合することも考えていました。）

この状況に対処するには、どのようなアイデアが必要ですか？

2018年の更新：

現在、ステージ3の提案があります。この回答を数か月で廃止することを楽しみにしています。

それまでの間、TypeScriptまたはbabelを使用する人は誰でも構文を使用できます。

varName = value

クラス宣言/式本体の内部で、変数を定義します。うまくいけば、数か月/数週間でアップデートを投稿できるようになります。

更新：Chrome 74では、この構文が機能するようになりました。

ES6の提案に関するES wikiのメモ（最大限に最小限のクラス）のメモ：

（意図的に）プロトタイプデータプロパティ（メソッド以外）のクラスプロパティ、またはインスタンスプロパティを直接宣言する方法はありません

クラスプロパティとプロトタイプデータプロパティは、宣言の外で作成する必要があります。

クラス定義で指定されたプロパティには、オブジェクトリテラルに出現する場合と同じ属性が割り当てられます。

これは、あなたが求めていることが考慮され、明示的に反対されたことを意味します。

しかし、なぜ？

良い質問。TC39の良き人々は、クラス宣言がクラスの機能を宣言および定義することを望んでいます。そのメンバーではありません。ES6クラス宣言は、ユーザーの規約を定義します。

クラス定義はプロトタイプメソッドを定義することを忘れないでください。プロトタイプで変数を定義することは、通常、ユーザーが行うことではありません。もちろん使用できます。

constructor(){
    this.foo = bar
}

あなたが提案したようなコンストラクタで。コンセンサスの概要もご覧ください。

ES7以降

ES7のための新しい提案は、そのクラスの宣言や表現を通じて、より簡潔なインスタンス変数を可能にする上で作業中です- https://esdiscuss.org/topic/es7-property-initializers

Benjaminの答えに追加するだけです。クラス変数は可能ですがprototype、設定に使用することはありません。

真のクラス変数の場合、次のようなことを行います。

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

クラスメソッド内から、その変数にthis.constructor.foo（またはMyClass.foo）としてアクセスできます。

これらのクラスプロパティは、通常、クラスインスタンスからアクセスできません。すなわちMyClass.foo与えます'bar'が、new MyClass().fooありますundefined

インスタンスからクラス変数にもアクセスしたい場合は、ゲッターを追加で定義する必要があります。

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

MyClass.foo = 'bar';

私はこれをTraceurでテストしただけですが、標準の実装でも同じように機能すると思います。

JavaScriptには実際にはクラスがありません。ES6でも、クラスベースの言語ではなく、オブジェクトベースまたはプロトタイプベースの言語を検討しています。いずれの場合もfunction X () {}、をX.prototype.constructorポイントしXます。でnew演算子を使用するXと、新しいオブジェクトが継承して作成されX.prototypeます。どれ未定義（を含むその新しいオブジェクトのプロパティがconstructor）そこからルックアップされています。これは、オブジェクトとクラスのプロパティを生成するものと考えることができます。

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'

あなたの例では：

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ような参照タイプstatic get MY_CONST() {return ['string'];}が文字列の場合、falseです。そのような場合、deleteオペレーターはトリックを行うことができます：

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

あなたの問題はほとんどが文体的であるので（宣言の束でコンストラクタをいっぱいにしたくない）、それはスタイル的にも解決することができます。

私がそれを見ると、多くのクラスベースの言語では、コンストラクターはクラス名自体にちなんで名付けられた関数です。文体的には、それを使用して、文体的にはまだ理にかなっているが、コンストラクターで行われている一般的なアクションを、実行しているすべてのプロパティ宣言でグループ化しないES6クラスを作成できます。単に実際のJSコンストラクターを「宣言領域」として使用し、次に「その他のコンストラクタースタッフ」領域として扱う関数という名前のクラスを作成し、真のコンストラクターの最後で呼び出します。

「厳格に使用」;

クラスMyClass
{
    //プロパティを宣言してからthis.ClassName（）;を呼び出すだけ ここから
    コンストラクタ（）{
        this.prop1 = '何とか1';
        this.prop2 = '何とか2';
        this.prop3 = '何とか3';
        this.MyClass（）;
    }

    //他のあらゆる種類の「コンストラクタ」のもの。宣言でごちゃごちゃにならない
    私のクラス（） {
        doWhatever（）;
    }
}

新しいインスタンスが構築されると、両方が呼び出されます。

Sortaは、宣言と実行するその他のコンストラクターアクションを分離する2つのコンストラクターを持っているようなものであり、それが起こっていることをスタイル的に理解することも難しくありません。

多くの宣言やインスタンス化で発生する必要のある多くのアクションを処理し、2つのアイデアを互いに区別したい場合は、このスタイルを使用すると便利です。

注：「初期化」の一般的な慣用的なアイデア（init()またはinitialize()メソッドなど）は、意図的に使用しないでください。構築と初期化の考えには、ある種の推定される違いがあります。コンストラクターを操作すると、インスタンス化の一部として自動的に呼び出されることがわかります。init多くの人が一目見ずに、の形式に沿って何かをする必要があると思い込むメソッドを見ると、var mc = MyClass(); mc.init();それが通常の初期化方法です。私はクラスのユーザーのための初期化プロセスを追加しようとしていないよ、私が追加しようとしているにクラス自体の建設プロセス。

一部の人々は一瞬ダブルテイクをするかもしれませんが、それは実際には少し重要です。それは、意図が建設の一部であることを彼らに伝えます。 ES6コンストラクターのしくみ」と実際のコンストラクターをもう一度見て、「ああ、彼らはそれを一番下に呼びます」と言います。これは、その意図を伝えない（または誤って伝える）ことよりもはるかに優れており、おそらく多くのそれを間違って使用し、外部やジャンクから初期化しようとしています。それは私が提案するパターンに非常に意図的です。

そのパターンにしたくない人のために、正反対も機能することができます。最初に宣言を別の関数にファームします。「プロパティ」や「publicProperties」などの名前を付けます。次に、残りのものを通常のコンストラクターに入れます。

「厳格に使用」;

クラスMyClass
{
    プロパティ（） {
        this.prop1 = '何とか1';
        this.prop2 = '何とか2';
        this.prop3 = '何とか3';
    }

    constructor（）{
        this.properties（）;
        doWhatever（）;
    }
}

この2番目のメソッドは見た目がきれいに見えるかもしれませんが、propertiesこのメソッドを使用する1つのクラスが別のクラスを拡張するときにオーバーライドされるという固有の問題もあります。それpropertiesを回避するには、より一意の名前を付ける必要があります。最初のメソッドにはこの問題はありません。コンストラクターの偽の半分はクラスにちなんで一意に名前が付けられているためです。

オールドスクールの方法はどうですか？

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

コンストラクターでは、計算する必要のある変数のみに言及します。私はこの機能のプロトタイプ継承が好きです-多くのメモリを節約するのに役立ちます（割り当てられていない変数がたくさんある場合）。

ベンジャミンが彼の回答で述べたように、TC39は少なくともES2015にはこの機能を含めないことを明確に決定しました。ただし、コンセンサスは、ES2016で追加されることです。

構文はまだ決定されていませんが、クラスで静的プロパティを宣言できるようにするES2016の暫定的な提案があります。

バベルの魔法のおかげで、あなたはこれを今日使うことができます。これらの指示に従ってクラスプロパティ変換を有効にすると、準備完了です。次に構文の例を示します。

class foo {
  static myProp = 'bar'
  someFunction() {
    console.log(this.myProp)
  }
}

この提案はごく初期の段階なので、時間が経つにつれ構文を微調整できるように準備しておいてください。

[長いスレッド、すでにオプションとしてリストされているかどうかは不明です...]。定数のみの
単純な代替案は、クラスの外で定数を定義することです。これは、ゲッターを伴わない限り、モジュール自体からのみアクセスできます。 この方法はポイ捨てされず、を取得します。
prototypeconst

// will be accessible only from the module itself
const MY_CONST = 'string'; 
class MyClass {

    // optional, if external access is desired
    static get MY_CONST(){return MY_CONST;}

    // access example
    static someMethod(){
        console.log(MY_CONST);
    }
}

ES7 クラスメンバーの構文：

ES7コンストラクタ関数を「ジャンク化」するためのソリューションがあります。次に例を示します。

class Car {
  
  wheels = 4;
  weight = 100;

}

const car = new Car();
console.log(car.wheels, car.weight);

上記の例では、次のようになりますES6。

class Car {

  constructor() {
    this.wheels = 4;
    this.weight = 100;
  }

}

const car = new Car();
console.log(car.wheels, car.weight);

これを使用するときは、この構文がすべてのブラウザーでサポートされているわけではなく、以前のバージョンのJSを変換する必要がある場合があることに注意してください。

ボーナス：オブジェクトファクトリ：

function generateCar(wheels, weight) {

  class Car {

    constructor() {}

    wheels = wheels;
    weight = weight;

  }

  return new Car();

}


const car1 = generateCar(4, 50);
const car2 = generateCar(6, 100);

console.log(car1.wheels, car1.weight);
console.log(car2.wheels, car2.weight);

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に置いた

（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(),
        });

    }
}

あなたはまだ「脂肪」コンストラクターで終わりますが、少なくともすべてが1つのクラスにあり、1つのヒットで割り当てられます。

編集＃2： 私は今、完全に一周し、今コンストラクタに値を割り当てています、例えば

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

どうして？本当に簡単です。上記といくつかのJSdocコメントを使用して、PHPStormはプロパティでコード補完を実行できました。1回のヒットですべての変数を割り当てるのは良かったですが、プロパティimoをコード化できないので、（ほとんど確実に）パフォーマンス上のメリットはありません。

まあ、コンストラクタ内で変数を宣言できます。

class Foo {
    constructor() {
        var name = "foo"
        this.method = function() {
            return name
        }
    }
}

var foo = new Foo()

foo.method()

それでも、他のプログラミング言語のようにクラスを宣言することはできません。ただし、クラス変数はいくつでも作成できます。しかし問題はクラスオブジェクトのスコープです。だから私によると、ES6 Javascriptでの最良の方法のOOPプログラミング：-

class foo{
   constructor(){
     //decalre your all variables
     this.MY_CONST = 3.14;
     this.x = 5;
     this.y = 7;
     // or call another method to declare more variables outside from constructor.
     // now create method level object reference and public level property
     this.MySelf = this;
     // you can also use var modifier rather than property but that is not working good
     let self = this.MySelf;
     //code ......... 
   }
   set MySelf(v){
      this.mySelf = v;
   }
   get MySelf(v){
      return this.mySelf;
   }
   myMethod(cd){
      // now use as object reference it in any method of class
      let self = this.MySelf;
      // now use self as object reference in code
   }
}

これは静的なものの少しハックっぽい組み合わせであり、私のために作品を手に入れます

class ConstantThingy{
        static get NO_REENTER__INIT() {
            if(ConstantThingy._NO_REENTER__INIT== null){
                ConstantThingy._NO_REENTER__INIT = new ConstantThingy(false,true);
            }
            return ConstantThingy._NO_REENTER__INIT;
        }
}

他で使用された

var conf = ConstantThingy.NO_REENTER__INIT;
if(conf.init)...