なぜクラスの中の関数にはfunctionを付けられないのですか？ - JS

Question

下記のコードですが、クラスの中の関数にfunctionをつけると動きません。何故でしょう。そういう。また、下記の実行結果がTestB -> TestAのようにTestBからでる理由は何故なのでしょうか。また、なぜ、クラス内の関数を呼ぶときは()を付けなきゃいけないのに、getを呼ぶときは()省いても大丈夫なのでしょうか。

class TestA {

	get test_area() 
	{
		return this.test_calcArea();
	}

	test_calcArea() 
	{
		$('body').after(`<p>TestA</p>`);
	}
}

const test = new TestA();
test.test_area;
//TestA


function TestB(){
  $('body').after(`<p>TestB</p>`);
}
TestB();
//TestB

Comments

[defghi1977]

何を言いたいのかがよく判りません. わからないことについて詳しく丁寧に説明して下さい.

Answer 1

下記のコードですが、クラスの中の関数にfunctionをつけると動きません。何故でしょう。

class構文が導入されたときに、そういう構文にしたとしか言いようが無いですが、functionキーワード無しでも曖昧にならないから省いたんでしょうか。

また、下記の実行結果がTestB -> TestAのようにTestBからでる理由は何故なのでしょうか。

TestBの方が後から追加しているから上に出ます。自明だと思いますが。

また、なぜ、クラス内の関数を呼ぶときは()を付けなきゃいけないのに、getを呼ぶときは()省いても大丈夫なのでしょうか。

プロパティ参照・代入と同一構文でアクセス出来るのが、getter・setterのメリットです。というかプロパティ参照・代入と同一構文でアクセスしたいが為に作られた機能でしょう。

Answer 2

あらかじめ文法を決めておくとソースが読みやすくなり、また学習もはかどるからです。

プログラムは好きなように書いても人の意図を忖度してその通りに動くということはありません。
必ず書いたとおりに動きます。

ですからきっちりと厳密に文法を決めておくのです。

Answer 3

.afterだと文法上おかしくなります。（body要素の後ろに要素を置くことになるため）
body要素に追加するなら.appendでしょう。

【jQueryを利用したDOM操作 要素の追加メソッドまとめ - Qiita】
https://qiita.com/nekoneko-wanwan/items/227ccad5f8cc449e91e9

Answer 4

そーゆーふーに決められてるから、としか言いようがないんだよなあ