「コンストラクタ関数内でメソッドを定義せざるを得ないケースはほとんど無い」という認識はどうなんでしょう？

Question

JavaScriptにおいて、JavaやC++で言うところのメンバ関数を実現しようとすると、コンストラクタ関数内で定義する方法と、プロトタイプにメソッドを追加する方法があると思います。これについて、前者はオブジェクトが生成されるたびにメソッドが追加されるため効率が悪い、と聞きました。例えば末尾に記した例では、new Person()が呼ばれるたびにsay()が追加されることが冗長である、ということだと理解しています。

この話を聞いて以降、私はプロトタイプにメソッドを定義するようにしています。幸いなことにまだ困った状況に遭遇していません(Javaのクラス／オブジェクトのように使えている)。「コンストラクタ関数内でメソッドを定義せざるを得ないケースはほとんど無い」とさえ思っています。

しかし、ふと気付きました。これは勉強不足だ、単に経験不足だと。

そこで書籍を読んでいるところなのですが、まだ「コンストラクタ関数内でメソッドを定義したほうが良い」と思える状況に出会えていません。

コンストラクタ関数内でメソッドを定義した方が良い、せざるを得ないような状況というか、イディオムを紹介していただけないでしょうか？

コンストラクタ関数内にメンバ関数を定義：

var Person = function(name) {
  this.name = name;
  this.say = function() { // こうやってメソッドを定義することはあるのだろうか？
    return "I am " + this.name;
  };
};

プロトタイプにメソッドを追加する：

var Person = function(name) {
  this.name = name;
};
Person.prototype.say = function() {
  return "I am " + this.name;
};

Answer 1

プライベートメンバーを実現したい場合なんかどうでしょうか。

var Person = function(name) {
  var _name = name;
  this.say = function() {
    return "I am " + _name;
  };
};

この例だと、クロージャ内に閉じ込められた変数_nameにsayメソッド以外からアクセスする方法はありません。

(実行時にはブレークポイントでいくらでも覗けますが、開発時に限ってはプライベートです。)

開発時にプライベートメンバーに間違ってアクセスすることを防ぐことには成功していますが、そもそも分かりづらい本末転倒感があります。
this._nameみたいに_から始まるものはプライベートというコーディング規約を決めておくほうが現実的でしょうし、ある程度市民権も得ています。

そもそも、「JSのプロトタイプの仕組みを使用した継承機構」と、「プライベートメンバー」は両立できないという結論が定説のようです。
というのも、JSでプライベートを実現するにはクロージャによる閉じ込みくらいしか方法がありません。
つまり、インスタンスごとに異なるクロージャを用意する必要があるため、ひとつのプロトタイプメンバーを使いまわしていては実現不可能というわけです。

上の例では、メソッドsayはPersonをインスタンス化する度に別々に定義されてしまい無駄がありますが、別々だからこそ、それぞれが異なる_name変数にアクセスできるというわけです。

Comments

[tchofu]

回答ありがとうございました。
自分の理解を確実にするため復唱させてください。
プライベートメンバーの中でも、変更する予定の無いプライベートメンバーと考えてよろしいでしょうか？コンストラクタ関数の中で

this.setName = function (newName) { name_ = newName; }

と定義してしまうと外部から変更できてしまうと思います。つまり、こういう（setNameのような）メソッドは作らない設計を前提とするようなものに適用するって理解で大きく外していないと思ってもいいでしょうか？
ここまで書いていて思ったのですが、コンストラクタ内でメソッドを定義するのは、「クラスに固定できる定数」（例えばMathクラスのPIとか）のようなimmutableなもののために使うという理解でもいいのでしょうか？

[退会済みユーザー]

このパターンはDIのように、オブジェクト間の関係を固定させるような用途にも利用できそうですね。

[tozjp]

すみません、遅くなりました。

> プライベートメンバーの中でも、変更する予定の無いプライベートメンバーと考えてよろしいでしょうか？

いいえ。"外部から直接"変更する予定の無いプライベートメンバーです。(というよりプライベートメンバーとはそういうものです。)
つまり内部的にはいくらでも変更していいし、外部からの操作によって結果的に(間接的に)書き換わる分には構わないということです。

> コンストラクタ関数の中で(略)と定義してしまうと外部から変更できてしまう

結果的には変更できていますが、 _name 変数そのものにはアクセスできていません。
メソッド経由のみでアクセスできるということは、クラスが変数へのアクセスを完全に管理できるということです。
詳しくはこちらの質問が参考になるかと。(Javaでの話ですが。)
https://teratail.com/questions/8078

> コンストラクタ内でメソッドを定義するのは、「クラスに固定できる定数」（例えばMathクラスのPIとか）のようなimmutableなもののために使う

確かに、getter だけを定義して setter を定義しなければ、外部から見た時のみ immutable にすることができますね。
ただし Math.PI の場合は Math.getPI() になっちゃうので、ちょっと例としては違いますかね。(しかもこれやるなら`Math.getPI = function(){return 3.14;};`で十分ですね。)

実際のMathに近い動きを実現する場合、 descriptor という機能を使用します。
話が大幅に逸れる上に長い解説記事がかけちゃう濃い内容なので中身は割愛しますが、
上の別質問で maisumakun さんが書かれている「外から見れば変数代入に見えるけど、内部的にはアクセサを動作させる」みたいなことがJSでもできます。

Answer 2

コンストラクタ内でメソッドを定義するという方法を初めて知りました。
逆に目から鱗です。
今まで知らなかったということは、私自身は一度も必要になる場面に
出会ったことがないのだと思います。

一応、こういう場面なら必要ではというのを考えてみました。
なお、functionとかprototypeとかの綴りが面倒だったのでCoffeeScriptで書いています。
http://coffeescript.org/ の TRY COFFEESCRIPT で変換して下さい。
classで書いていますが、JavaScriptで変換したのを見ていただければ、
意味は同じであるとわかると思います。

1. コンストラクタ内のローカル変数を束縛しておきたい！

class Counter
  constructor: ->
    i = 0
    @count = ->
      return ++i

a = new Counter()
console.log a.count() # => 1
console.log a.count() # => 2
console.log a.count() # => 3

呼び出すたびにカウントが増えるというよくあるやつです。
コンストラクタ内のローカル変数iを束縛するには上のようにするしかありません。
ただ、このパターンですと、そもそもiをインスタンス変数にすればいいだけです。

class Counter2
  constructor: ->
    @i = 0
  count: ->
    return ++@i

1. コンストラクタの引数によってメソッドの動作を変えたい！

下記はコラッツの問題の変換処理で次を求めていく整数のラッパクラスです。

class Collatz
  constructor: (@num) ->
    if @num % 2 == 0
      @next = -> new Collatz(@num / 2)
    else
      @next = -> new Collatz(3 * @num + 1)

c = new Collatz(6)
console.log c.num                             # =>  6
console.log c.next().num                      # =>  3
console.log c.next().next().num               # => 10
console.log c.next().next().next().num        # =>  5
console.log c.next().next().next().next().num # => 16

数字が偶数か奇数かで次を求める式が変わるようにして、
効率よく？計算しているような気だけします。
ただこれも、単に毎回場合分けしたほうが、スッキリとかけます。

class Collatz2
  constructor: (@num) ->
  next: ->
    if @num % 2 == 0
      new Collatz(@num / 2)
    else
      new Collatz(3 * @num + 1)

もし、@numがインスタンス変数でなかったとしても、1.と同じで、
インスタンス変数にすればいいだけの話です。

以上の2つが考えつきましたが、どちらも適当なインスタンス変数を持てばいいだけですし、
動作も複雑になって、かえって見通しが悪いプログラムになってしまいました。
必須になるような場面は無いのではないでしょうか？

Comments

[tchofu]

回答ありがとうございます。
とてもわかりやすい例をありがとうございました。100%理解できたわけではありませんが、ご提示いただいたコードを眺めていてなんとなく見えたような気がします。ただ、もうちょっと修行を積んでからあらめて考えることにします。

現時点の私の考えは、
「コンストラクタ内のメソッドでローカル変数を束縛することはあまり無いが、その性質を利用したテクニックとして利用する場合がある。
換言すれば、私のような素人は積極的に使う必要は無いけど、熟練者になってくるとこの性質を生かしたくなる場面が出てくる可能性がある」
です。

Answer 3

物によって処理が違う場合とかなら使いそうですがコンストラクタ内で定義と言うのかというと微妙。
クロージャ作る時が一番使う可能性あるのかな。

function A(){
  A.prototype.getName=function (){
    return this.name;
  };
  A.prototype.setMethod=function (_funcName,_func){
    this[_funcName]=_func;
  };
  A.prototype.name="Jon";
};

var c=new A();
c.setMethod(
  "getName",
  function (){
    return this.name+" : nice name";
  }
)
c.getName();//Jon : nice name

/*
c.getName=function (){
  return this.name+" : nice name";
};
と同じなのでsetMethod()なんて作らなくてもいい気もする
*/

Comments

[tchofu]

回答ありがとうございました。
本筋じゃないかもしれませんが、
A.prototype.name="Jon";
という書き方は始めてみました。クラス共有変数っぽく使えるんですね。勉強になりました。

全てを理解するのは今の私にとって難しいので、もうちょっと勉強してから読み返したいと思います。

Answer 4

まず、プロパティとメソッドを区別する必要はありません。
コンストラクタ処理の中で決定されるプロパティ、メソッドはコンストラクタ内で定義します。

function Person (name, callbackfn) {
  this.name = name;        // nameプロパティはコンストラクタ処理中に値が決定される
  this.hoge = callbackfn;  // hogeメソッドはコンストラクタ処理中に値が決定される
}

インスタンスが生成される度に値が動的に変化するプロパティ、メソッドはコンストラクタ内で定義してやり、常時同じ処理、値になるプロパティ、メソッドは prototype 上で定義してやります。

---

ECMAScript 5 には private 変数がありません。
従って、private 変数と同様の処理をする場合にはコンストラクタ内のローカル変数にクロージャで値を閉じ込める必要があります。

function Person (name) {
  this.getName = function getName () { return name; };  // private変数 name への getter 関数
}

new Person('Ken').getName(); // "Ken"

getName メソッドは常時同じ処理を行うメソッドですが、ローカル変数 name を参照する為にはコンストラクタ内で定義してやる必要があります。
インスタンスが生成される度にメモリを消費するので効率がよくありませんが、ECMAScript 5 の範囲内ではどうしようもありません。

ECMAScript 6 にも private 変数はありませんが、WeakMap を使うことで private 変数のようなものを定義できるようになりました。

var Person = (function () {
  var privateMap = new WeakMap;

  function Person (name) {
    privateMap.set(this, name);
  }

  Person.prototype.getName = function getName () {
    return privateMap.get(this);
  }

  return Person;
}());

console.log(new Person('Ken').getName());   // "Ken"
console.log(new Person('Alice').getName()); // "Alice"

Comments

[tchofu]

回答ありがとうございます。
もしもう少しお付き合いいただけるなら、『getName メソッドは常時同じ処理を行うメソッドですが、ローカル変数 name を参照する為にはコンストラクタ内で定義してやる必要があります』という箇所について確認させてください。

「常時同じ処理を行うメソッド」と表現されているメソッドですが、これは”nameはimmutableに使うこととする”設計を前提にされていると考えてよろしいでしょうか？

つまり、

function Person (name) {
this.getName = function getName () { return name; };
this.setName = function setName (newName) { name = newName; } // コンストラクタ関数外部からnameにアクセス可能になってしまうのでやらない
}

とsetNameは定義しない前提ということでしょうか？

[think49]

「常時同じ処理を行うメソッド」は name が immutable という意味ではなくて「メソッドの処理を後で作りかえる必要がない」という意味です。
ご掲示の例でいえば、getName, setName は共にメソッドの処理は動的に変化しないので本来は prototype 上に存在して良いものですが、name を参照する為にはコンストラクタ内で定義するしかありません。
つまり、ES5 の範囲内で処理するならば、setName もコンストラクタ内で定義する必要があります。
最も、WeakMap は Polyfill を作りやすい仕様なので、Polyfill を適用して WeakMap で実装するコードが個人的にはお勧めです。

(20:54追記)
言い換えるなら「コンストラクタ処理が始まる前に処理が決定しているメソッド」でしょうか。
getName, setName は共に private 変数 name を操作する処理が予め決定しているのでコンストラクタ内に収める必要はなく、prototype 上にあるべきメソッドです。。
親記事の callbackfn はコンストラクタが呼び出されるまではメソッドの処理が決定しないので prototype 上に定義することが出来ません。

[tchofu]

回答ありがとうございます。
「コンストラクタ処理が始まる前に処理を決定しておきたい（変更したくない）」がポイントであることはなんとなく判りました。
コンストラクタ関数内でメソッドを定義する意義は掴めたと思うので、次は用途について気長に考えることとします。

Answer 5

2019年時点では、「イベントハンドラなど、クラス外部へ引き回せるように、thisをインスタンスに固定したメソッドを作りたい」という場合に、コンストラクタ内での生成（あるいはそれに相当するclass property + arrow function）がよく行われています。

class SomeComponent extends React.Component{
  constructor(props) {
    super(props);
    // 別なところに引っ張り出しても、thisはこのインスタンスから切れない
    this.handler1 = () => console.log(this);
  }

  // まだ提案中だけど、こんな書き方もある
  handler2 = () => console.log(this);
}