[JS]ES2015のclass利用時のメソッド間の変数引き渡しについて

Question

JSのコーディングについてご相談させて頂きます。

JSのコーディングでようやくES2015を本格的に取り入れようと本腰をあげました。
Javaも利用しており、JSでも普段からprototypeなどを利用した書き方をしていたので、class
の概念導入は当初特に問題なかったのですが、引数の受け渡し方法で悩んでいます。

class内のコンストラクタでプロパティをthisに紐付けて設定するかと思いますが、
class内でメソッドが他メソッドを呼ぶ時、以下受け渡し方法を想定しています。

• 通常通り引数で受け渡す
• thisにプロパティとして紐付け、渡したい先のメソッドでthisから参照する

当初前者で考えていたのですが、eslintがthisを利用していないメソッドに警告を出す
ことから、thisを参照するように作ったほうが良いのかと悩んでいます。

確かにAngularなどを使った時などに値を中央一括管理して画面に反映するように、なるべく
this内に集約した方が確かに良いような気もします。

---

またもう一件、class内でどのタイミングでもthisにプロパティを追加出来ることが
少し気持ち悪く感じておりますが、こんなものなのでしょうか。
出来れば感覚的にはJavaのプロパティ宣言のように、宣言したものだけしかプロパティ
設定出来ないようしたいと考えています。
コンストラクタ内でthisに紐付けたプロパティ以外、他メソッド追加出来ない
とかの制限は出来ないのでしょうか。
Objectの場合は、よく拡張禁止にObject.preventExtensionsを使っていたのですが…。

なお、本プロジェクトは残念ながらフレームワークの導入はしておりません。

---

現物のソースコードは投稿出来ないのですが、以下のようなイメージです。

class Page {
    constructor() {
    	// もろもろconstructorでプロパティ定義。
    	this.id = null;
    	this.name = null;
    }

	controller() {
		this.getData(() => {
			// 取得したデータの表示処理
			draw();
		});
	}

	getData(callback) {
		// Ajaxでサーバーからデータ取得
		const data = ～;
		// 非同期についてはさておき、ajax通信後に以下が実行されるとします。
                // 取得したデータをthisに紐付け
		this.id = data.id;
		this.name = data.name;
		callback();
	}
	
	draw() {
		// this.idとthis.nameを画面描画
		// 引数はなく、thisから参照します。
	}
}

const page = new Page();
page.controller();

※テキストエディタにぱぱっと書いたものなので、書式のミスがあるかもしれません。
※なお、以上のソースは「thisにプロパティとして紐付け、渡したい先のメソッドでthisから参照する」のイメージです。

Comments

[yambejp]

具体的なソースは提示できますか？

[rontec]

すみません、職場のソースコード、かつ職場からのコードの外部持ち出しが厳しいので、現物は投稿出来ないのですが、大体のイメージを追記します。

Answer 1

他メソッドへの変数受け渡しについて。

そのメソッド内でthisを使用しなくてよい場合（提示されたサンプル中のgetData()？）は、クラスのメソッドではなく通常の関数として切り出して宣言するというのはいかがでしょうか？

切り出した関数を宣言する場所ですが、クラス外のほかには、1メソッド内からしか呼ばれない関数であればそのメソッドの中で宣言するという手もあります。
モジュール機能（ES2015、CommonJS問わず）をお使いでしたら、クラス外での宣言でもexportしなければ元のクラスへの帰属性をアピールできるかと思います。

---

Object.preventExtensions は初めて知りましたが、class構文は基本的に従来のprototypeによるOOPの糖衣構文ですので、classで作ったオブジェクトにも利用できるはずです。
手元のnodejsで確認したところ、constructorの末尾の Object.preventExtensions(this) や、クラス宣言後の Object.preventExtensions(Page.prototype) 等もうまく動作しました。

Comments

[rontec]

メッソド内の宣言については私もよく考えるのですが、1メソッドが長くなってしまうことと、多機能化してしまうのが悩みどころですね…。
でもここでしか使わないからなと、結局そうしてしまうこともありますが笑

いっそclassの外に出してしまう発想はありませんでした。
ただこれもそのclassでしか使わないことを考えると悩ましいですね。
選択肢が広がったので、もう少し考えてみようと思います。
ご教示頂き、ありがとうございました。

---
thisをObject.preventExtensionsで囲う件に関しては、出来たらいいのになぁと考えていたはいたのですが、勝手に出来ないと思いこんで試していませんでした。
まさか出来るとは…と目から鱗でした、ありがとうございます！