「bind」や「call」によるthisの固定を一回一回設定しないようにしたい。

Question

前提・実現したいこと

ECMascript5水準で、本格的なクラスを作ってみようと思い、初めて作ってみたコードを実験してみたところ

AAA = function (i, j, k) {
    var i = i || 0;
    var j = j || 1;
    var k = k || 2;

    var p = AAA.prototype;
    p.out = function () {
        console.log(i + j + k)
    }
}

bbb = new AAA(3,4,5);
ccc = new AAA(6,7,8);

bbb.out();//21
ccc.out();//21

このように、どちらも同じ結果になってしまうことが判明し、クロージャーを捨てて全ての変数を「this」で書き直して、out関数に引数を追加しました。また、thisの参照位置がクラスと関数で異なってしまうので、さらに「bind」と「call」を用いて出力まで可能にしたコードが以下のコードです。

AAA = function (i, j, k) {
    this.i = i || 0;
    this.j = j || 1;
    this.k = k || 2;

    var p = AAA.prototype;
    p.out = function (l) {
        console.log(this.i + this.j + this.k + l)
    }
}

bbb = new AAA(3,4,5);
ccc = new AAA(6,7,8);

//bindで実行
NEObbb = bbb.out.bind(bbb);
NEOccc = ccc.out.bind(ccc);
NEObbb(1);//13
NEOccc(1);//22

//callで実行
bbb.out.call(bbb,1);//13
bbb.out.call(ccc,1);//22

これでも実際動くので、文法上の問題はないのですが、
「bind」と「call」を使ったやり方では、どちらも冗長な書き方になってしまいます。
「bind」の場合は、Function.prototype.bind() - JavaScript | MDN - Mozillaによると新しい関数を生成するそうなので、せっかくのプロトタイプ宣言（メモリ節約のつもり）が無駄になってしまいますし、「call」を使ったやり方も当初予定していた関数の後ろに「call(クラス名)」を必ず付けなくてはいけなくなってしまうので、それはそれで面倒です。
なんとか、見やすい記述になるように、

bbb.out();//これで出力

できるようにしたいのですが、方法はないでしょうか？

Answer 1

prototype-chain

「なぜ bind, call を使うのか」が質問文から読み取れませんでしたが、問題の根本的原因は「AAA.prototype の参照が各インスタンスで共有している」というプロトタイプの原理を理解できていない事にあるように思います。

• 継承とプロトタイプチェーン - JavaScript | MDN
• JavaScriptのオブジェクト指向が10%理解できる記事（実践編） - Qiita

作り方は人それぞれポリシーがあるでしょうが、素直にES5で書くならば、こんな感じです。

'use strcit';
function AAA (i, j, k) {
  var len = arguments.length;

  this.i = len > 0 ? +i : 0;
  this.j = len > 1 ? +j : 1;
  this.k = len > 2 ? +k : 2;
}

Object.defineProperty(AAA.prototype, 'out', {
  writable: true,
  enumerable: false,
  configurable: true,
  value: function out () {
    console.log(this.i + this.j + this.k);
  }
});

new AAA(3,4,5).out();
new AAA(6,7,8).out();

var out = AAA.prototype.out.bind({i:0,j:1,k:2});

out();
AAA.prototype.out.call({i:1,j:2,k:3});

引数なしの判定

this.i = i || 0;
this.j = j || 1;
this.k = k || 2;

i, j, k が 0 である場合に右辺の初期値が適用されます。
引数未指定時を正確に判定したい場合は、arguments.length を使用します。

Re: meron-pan さん

Comments

[meron-pan]

bbb.out()を普通に実行すると、NaNが出力されるのでcall,bindを使って、thisを固定させました。
私の中ではprototypeにすると、生成したインスタンスが持っていないメソッドを使っても、prototypeを辿ってメソッドを実行するという認識です。なので、this.method = function()...と逐一メソッドを作るよりも、処理内容が同じならメモリを使わなくて済むんだな・・・くらいの感じで使っているのですが、間違っているのでしょうか？

[think49]

> bbb.out()を普通に実行すると、NaNが出力されるのでcall,bindを使って、thisを固定させました。
「普通に実行する」の再現コードはどれでしょうか。
質問文の2番目のコードの事なら、「引数未指定⇒l(undefined)を加算⇒NaN出力」が原因です。
bind時のコードと同じように、bbb.out(0) で期待通りに動作するはずです。
ちなみに、「引数無し判定のコード例」を親記事で触れています。

> this.method = function()...と逐一メソッドを作るよりも、処理内容が同じならメモリを使わなくて済むんだな
prototypeはメモリ節約になりますが、コンストラクタ実行の度に、毎回同じ prototype を定義するのは無駄だと思います。
質問文の1番目のコードに至っては、コンストラクタ実行の度に「違うprototypeを定義している」ので、prototypeの原理を理解しておられないように読めました。
原理は親記事に書いた参考サイトを読んでください。

[meron-pan]

>質問文の2番目のコードの事なら、「引数未指定⇒l(undefined)を加算⇒NaN出力」が原因です。
bind時のコードと同じように、bbb.out(0) で期待通りに動作するはずです。
スイマセン。self = this;としないと動かなくなるコードのつもりで書いたつもりだったんですが、普通にこれ動作しますね・・・。

[meron-pan]

NaNが出てしまう理由も引数の指定ミスですし、お恥ずかしい限りです。出直してきます。

[think49]

解決して良かったですね。
this値の扱い、プロトタイプチェーンについては学習し直すと、良い気がします。

ところで、親記事に書いた「引数なしの判定」は質問文のコードのままで期待通りの動作だったのでしょうか。
私としては、new AAA(0,0,0).out(0) の結果が直観的ではないのですが。

[meron-pan]

そうですね、webページにちょこちょこっと動きを加えるだけならできたんですけど、こうやってクラスとか作ろうとするとやっぱり勉強しなきゃいけないことが多そうです（ECMascript2015が登場しているのでそろそろ使われなくなりそうなやり方ではありますが、まだまだclass構文もシンタックスシュガーですし）。
後、引数の件ですが、０以外の数値を用いるときには、引数が必要になればいいので特には問題ないです。

[meron-pan]

ただ、||を引数が指定されなかった時用に使ったのは最近のことでして（それまでは、if文で書いてました）、この演算子の挙動までは深く考えていなかったので、勉強になりました。ありがとうございます。