【javascript】コンストラクタとprototypeの定義をまとめて行いたい

Question

いつもお世話になっています。

以下のようにコンストラクタを定義して、そのprototypeにメソッドを作成するということはよくあると思います。

function Person(name) {
  this.name = name;
}
Person.prototype = {
  log: function() {
    console.log(this.name);
  }
};

このような場合に、Personを定義した箇所でまとめてprototypeも設定するやり方はありますでしょうか。

/* 定義のイメージ */
function Person(name) {
  this.name = name;
  this.prototype = { /* これだとprototypeという名前の普通のプロパティになってしまうかと... */
    log: function() {
      console.log(this.name);
    }
  };
}

どうぞよろしくお願いします。

Answer 1

プロトタイプは、コンストラクタとなる関数の実行前に設定しないと意味がないので、その関数の内側に書くことはできません。

Comments

[t-book]

なるほど同時に設定することはできないのですね。
勉強になりました！回答ありがとうございます。

Answer 2

maisumakunさんも書かれている通り、関数の内側でプロトタイプをセットすることは出来ません。
「ある」か「ない」かで言ったらないのです。

ですがプロトタイプを設定する関数を作ることで一応まとまった書き方をすることもできます。
(求めていたものとは違うかもしれませんが……)

// 第一引数に渡された関数のprototypeに第二引数に渡されたobjectをマージする関数
function setPrototype (fn, proto) {
    if ("object" == typeof proto) {
        var prototype = fn.prototype;
        var keys = Object.keys(proto);
        for (var i = 0, j = keys.length ; i < j ; i++) {
            prototype[keys[i]] = proto[keys[i]];
        }
    }
    return fn; // 渡された関数を返す
}

上のような関数をを定義してから

var Person = setPrototype(function (name) {
    this.name = name;
}, {
    log: function () {
        console.log(this.name);
    }
});

とすればほぼ同じ物ができます。

「ほぼ」と言ったのは、

1. Personという名前付き関数を定義するのではなく変数Personに無名関数を代入している点
2. prototypeをオブジェクトで上書き代入するのではなく元々関数にあるprototypeにプロパティとして追加している点

が違うためです。

1)は通常は問題にならないと思います (もしこれが問題になる場面があれば教えて欲しいです)

2)についてはprototypeにオブジェクトを代入するといくつか問題がある(参考サイト)ので、こちらの方がいいかと思います。

ただ、あまり変わった書き方をするのはあまりおすすめしません。
一応こういったこともできる、というだけです。

prototypeにオブジェクトを直接代入する際に起こる問題の対応も、

function Person(name) {
    this.name = name;
}
Person.prototype.log = function() {
    console.log(this.name);
};

普通にこうするか、
merge関数作ってやるぐらいにした方ががいいかと思います

// 第一引数に渡されたobjectに第二引数以降のobjectをマージする関数
function merge (obj1, obj2/*, obj3, objN...*/) {
    if ("object" == typeof obj1) {
        for (var i = 1, j = arguments.length ; i < j ; i++) {
            obj2 = arguments[i];
            if ("object" != typeof obj2) continue;
            var keys = Object.keys(obj2);
            for (var m = 0, n = keys.length ; m < n ; m++) {
                obj1[keys[m]] = obj2[keys[m]];
            }
        }
    }
    return obj1;
}

function Person (name) {
    this.name = name;
}
merge(Person.prototype, {
    log: function () {
        console.log(this.name);
    }
});

長々と失礼しました。

Comments

[t-book]

ご回答ありがとうございます！

今回の質問意図としましては、プロトタイプごとまとめて一つのブロック内で設定できれば、見た目上分かりやすく（エディタでも折りたためる）なるかな、と思ったためでした。

プロトタイプを設定する関数というのは思いつきませんでした。
というより質問とは趣旨が違ってくるのですが、↓ってデメリットの可能性があったのですね...

Person.prototype = {
log : function() {},
log2: function() {}
};

// 今まで↓と単に記述の仕方が違うだけで、同じようものだと勝手に思っていました...
Person.prototype.log = function() {};
Person.prototype.log2 = function() {};

たくさん書いていただき大変参考になりました。
もっと精進します。ありがとうございました！