[解決済み】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
関連
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] 変数が「未定義」または「NULL」であるかどうかを判断するにはどうすればよいですか?
-
[解決済み] JavaScriptで変数が文字列かどうかをチェックする
-
[解決済み] Pythonで静的なクラス変数は可能ですか?
-
[解決済み] JavaScriptで変数が存在するか(定義されているか/初期化されているか)をチェックする
-
[解決済み] JavaScriptで変数が配列であるかどうかを確認する方法は?
-
[解決済み] Could not find or load main class "とはどういう意味ですか?
-
[解決済み] ES6インポートで中括弧を使用するのはどのような場合ですか?
-
[解決済み] JavaScript ES6クラスにおけるプライベートプロパティ
-
[解決済み】Node.jsのrequireとES6のimport/exportを使い分ける。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Failed to load resource: net::ERR_FILE_NOT_FOUND loading json.js
-
[解決済み】Uncaught TypeError: nullのプロパティ'value'を読み取ることができない
-
[解決済み] React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined [duplicate] (未定義のプロパティ'state'を読み込むことはできません。
-
[解決済み】Uncaught SyntaxError: JSON の位置 0 に予期しないトークン u があります。
-
[解決済み】エラー:リクエストのエンティティが大きすぎる
-
[解決済み】リソースはドキュメントと解釈されるが、MIMEタイプはapplication/zipで転送される
-
[解決済み】Kendo Observable Bindingと併用する場合、Kendo Switch Labelsを変更することは可能ですか?[Kendo-UI]です。
-
[解決済み】Jestが予期しないトークンに遭遇した
-
[解決済み】このオブジェクトの "forEach "はなぜ関数でないのですか?
-
[解決済み] ES6クラスで静的定数を宣言する?