Javascriptの関数オブジェクト及びインスタンスにメソッドを追加したい

Question

まだまだJavascriptの初心者なのですが、オブジェクトやprototypeチェーンの考え方を学んでいく中に単純ばことがわからなくなってしまいました。。
下記の書く内容について、もしよろしければご教示ください。

(1)下記の(A)のようにFooの関数オブジェクトに新たなメソッドを追加したいと思います。ここではfunction () {document.write("hello");}が帰ってきているのでFooオブジェクトにAメソッドが追加できていると理解して良いのでしょうか？

(2)とあるサイトで既存のオブジェクトにメソッドを追加するときはprototypeに追加すべき内容を拝見しました。（ttp://www.openspc2.org/reibun/javascript/koubun/039/）
prototypeに格納することで親も子も共通して利用出来るというざっくりした認識でいるのですが、実際に(A)と(B)で何が違うのでしょうか？
例えばここでFoo.Aでメソッドを呼び出せないことが不思議です。チェーンを辿って
function() {document.write("hello");}を呼び出してくれると認識しておりました。

(3)下記の(C)のようにインスタンスにメソッドを追加するコードはこのような形でよいのでしょうか？また、また、prototypeを利用すればFooでもアクセスできるのでしょうか？

(4)下記の(D)のように、インスタンスを利用しても4という結果を取得できない理由がわからないのですが、どこに問題があるのでしょうか？

(A)
function Foo() {}
Foo.A = function() {document.write("hello");}
console.log(Foo.A);
//function () {document.write("hello");}

(B)
function Foo() {}
Foo.prototype.A = function() {document.write("hello");}
console.log(Foo.prototype.A);
//function () {document.write("hello");}

(C)
function Foo() {}
Foo.A = function() {document.write("hello");}
var foo = new Foo();
foo.B=function() {document.write("good-bye");}
console.log(foo.B);
//function () {document.write("good-bye");}

(D)
  function Foo() {}
Foo.A = function(n) {return n+n}

var foo = new Foo(2);
console.log(foo.A);
//function (n) {return n+n}

基礎的なことかと思うのですが、どうしても理解しようと思っており、質問させていただきました。よろしくお願い申し上げます。

Answer 1

（1） そのとおりです。JavaScriptでは、関数もFunctionというオブジェクトです。

（2）関数オブジェクトのprototypeプロパティは、その関数オブジェクトのプロトタイプではありません。これは、関数をコンストラクタとして使った場合に、新しく作られたオブジェクトのプロトタイプとなるオブジェクトなのです。

あるオブジェクトのプロトタイプを得たい場合、Object.getPrototypeOf()を使うか、ES6で標準化された__proto__プロパティからアクセスします。なお、関数のプロトタイプオブジェクトはすべて同じ（Function.prototype）なので、そこに値を自分で追加することはあらゆる関数オブジェクトに影響してしまう、という動作の性質からプロトタイプ汚染と呼ばれ、基本的には禁じ手に近い技です。

（3）（2）で触れたように、Foo.prototype.Bを定義しておけば、インスタンスごとにメソッドをつけなくても、foo.Bとしてアクセスできます（foo.__proto__ == Foo.prototypeです）。

（4）newしても、関数オブジェクト自体にあるメソッドは引き継がれません。1つ1つ定義するか、prototypeに定義しましょう。

Comments

[SugiuraY]

maisumakun様
ご回答有難うございます。わかり易い回答でおおむね理解ができました。(4)についてだけ確認したいのですが、関数オブジェクトのメソッドは引き継がれないというこどですが、ともすれば関数オブジェクトのインスタンスを作る意味自体がないと言う事でしょうか？また、普通のオブジェクトも同様に、プロパティはコピーされ、メソッドはコピーされないのでしょうか？

[maisumakun]

他の言語で言えば「クラスメソッド」に当たるようなものを、関数オブジェクトに直接入れておく例があります。例えば、jQueryでは、jQuery()自体は関数ですが、jQuery.XXX()の形で呼び出せるメソッドは、Ajaxやユーティリティ関数のように、「jQueryのインスタンスとあまり関係しない」メソッド群となっています。

Answer 2

オブジェクト（連想配列）を利用するパターン

基本的な方法。

var Obj = {};

Obj.method1 = function(){...};
Obj.method2 = function(){...};


// 別パターン
var Obj = {
  method1: function(){...},
  method2: function(){...}
}

プロトタイプを利用するパターン

前述の方法にはメモリ消費の面で無駄がある（複数コピーした場合にメソッドもコピーされる）ので、こちらの利用が推奨されます。

方法1

• 1つ1つのメソッドをプロトタイプに定義する形式。
• 新たなメソッドの追加が容易。

var Constructor = function(){
  // インスタンス変数の定義
};

Constructor.prototype.method1 = function(){
  // メソッドの処理
};

Constructor.prototype.method2 = function(){
  // メソッドの処理
};

方法2

• Constructor.prototype = {...} を再度定義すると、以前定義したメソッド全て失われる点に注意。

var Constructor = function(){

}
Constructor.prototype = {
    method1 : function(){
      // メソッドの処理
    },
    method2 : function(){
      // メソッドの処理
    }
}

// method3を追加するつもりでこのように書いてしまうと、method1,2が失われてしまう。
Constructor.prototype = {
    method3 : function(){
      // メソッドの処理
    }
}

Comments

[SugiuraY]

ご回答いただき、ありがとうございます。とてもわかりやすかったです。