JavaScriptでのクラスの作り方

Question

JavaScriptでのクラスの作り方

JavaScriptのクラスについて

クライアントサイドで動くWebアプリを作成しようとしており、
JavaScriptのクラスおよびインスタンスの動的な生成について不明な点がございます。

クラスを作成し、
コンストラクタの中にパラメータなどを書き、
コンストラクタの外に
▼パラメータへの初期値の代入(イニシャライズ)
▼処理を開始
▼処理を停止
上記の関数を書こうとしています。

---

<script>

class MyClass{
  constructor( a, b, c ){
  };

  init () {
    this.a = 1;
    this.b = 2;
    this.c = 3;
  };

  start () {
    let start1 = 0;
    this.start1 = this.a + this.b;
  };

  stop () {
    let stop1 = 0;
    this.stop1 = this.c - this.b;
  };

};

const myclass = new MyClass( 2, 3, 4 );
//  let myclass.start1a = myclass.start ();
    console.log('myclass.start1a is ' + myclass.start1a);
//  let myclass.stop1a = myclass.stop ();
    console.log('myclass.stop1a is ' + myclass.stop1a);

</script>

---

私の思惑では、

---

myclass.start1a is 5
myclass.stop1a is 1

---

という結果を得たかったのですが、

---

myclass.start1a is undefined
myclass.stop1a is undefined

---

となってしまいました。

そこで、上記ではコメントアウトしてあるletを追加すると、

---

Uncaught SyntaxError: redeclaration of const myclass

---

のエラーが出て「関数の引数名としてある変数名が発生した後、関数本体内の let 代入文を使用して同じ変数名を再度宣言すると発生する」とのこと。ほかにも別のエラーに対応しようと試すと次は別のエラーが出るのループにハマってしまい、こちらで質問させていただくことにしました。

解決方法をご存知の方いらっしゃいましたら、よろしくお願いいたします。

Comments

[m.ts10806]

コードはマークダウンのcode機能にてご提示ください。

あと、エラーの通りそのようなプロパティはどこにも定義されてないように見受けられます

[int32_t]

start1 stop1 というプロパティ・変数がどうなって欲しいのか、現状の質問文では不明瞭です。

[m.ts10806]

せめてコードのマークダウン対応は今からでもしてほしい。どのようになるかは既存回答参照
やり方はヘルプページなど参照

[606]

読みにくい質問をしてしまいすみませんでした。勉強になりました。

[m.ts10806]

いえいえ
そのままだと冒頭のインデントが詰められてその部分に何かあったとき他者が気付けないのです。
空白1文字でも改行一つでも違えばそれは違うコードですしね

Answer 1

いま一つどういう動作が欲しいのかよくわからないのですが、おそらく以下のような感じでしょうか。

• start() は this.a と this.b の和を返す。
• stop() は this.c と this.b の差を返す。

であれば、以下のような修正が必要です。

• コンストラクタ内で this.a this.b this.c を初期化する。
• start() は this.a + this.b を return する。stop() も同様。
• 呼び出しは「console.log('myclass.start1a is ' + myclass.start());」のように。クラスの外側で myclass.start1a のようなプロパティを新規に作るのはオススメしません。

Comments

[606]

ご回答ありがとうございます。とても参考になりました。感謝いたします。

Answer 2

コンストラクタの使い方も微妙、initも利用されていないのでは？

class MyClass{
  constructor( a, b, c ){
    this.a = a;
    this.b = b;
    this.c = c;
  };
  init () {
    this.a = 1;
    this.b = 2;
    this.c = 3;
  };
  start () {
    let start1 = 0;
    this.start1 = this.a + this.b;
  };
  stop () {
    let stop1 = 0;
    this.stop1 = this.c - this.b;
  };
};
onst myclass = new MyClass( 2, 3, 4 );
myclass.start();
console.log('myclass.start1a is ' + myclass.start1);
myclass.stop();
console.log('myclass.stop1a is ' + myclass.stop1);

Comments

[606]

ありがとうございます。思惑通りの挙動になりました。
実際にやろうとしているコードを全部書いてしまうと冗長になりすぎるとの思いから、問題が発生している部分だけにフォーカスしたシンプルなソースを提示させていただきました。initも実際には利用する予定です。ご回答に感謝いたします。