javascriptで既存のメソッドの機能は引き継ぎながら同じメソッド名で上書きするにはどのようにすればいいのでしょうか？

Question

こんにちは。javascript初心者です。

javascriptで既存のメソッドの機能は引き継ぎながら同じメソッド名で上書きするにはどのようにすればいいのでしょうか？

具体的に現在実現したいことはフォーム全てのsubmitメソッドに機能を追加したいです。
以下のように書いてみたのですが、上手く動きません。根本的に何かが間違っているかもしれませんが、ご教授願えませんでしょうか？よろしくお願いします。

        $('form').each(function () {
            this.submit = (function () {
                function newSubmit() {
                    alert("追加したい機能");
                    this.prototype.submit.apply(this);
                }
                return function () {
                    return newSubmit();
                }
            })();
        });

Answer 1

提示のコードでreturn newSubmit();とありますが、
こうすると関数の実行結果(returnしていないのでこの場合undefined)が
this.submitに代入されてしまいます。

一度関数を退避し、その退避した関数を新関数内で呼び出してみてはどうでしょう。
(each内でこういうことしたことないので、どうなるかやってみないとわからないのですが。)

$('form').each(function () { 
	var oldFunction = this.submit; //既存の関数を退避
	this.submit = function () { 
		oldFunction(); //新関数内で既存の関数を実行
		alert("追加したい機能"); 
	}; 
}); 

Comments

[KazuyaKubo623]

ご回答ありがとうございます。
皆さまのご回答のお蔭で自己解決できました！

Answer 2

コードは書きませんが、
onclick と onsubmit を「退避」して、onsubmit とonclick をnull で初期化してから、jquery.on で submitを設定、e.target.orgclick と e.target.orgsubmit が元々実装されてたイベントハンドラなので、それを実行後、submit に追加した新しい機能を実行すれば良いですね。大元のイベント契機が、buttonなのかsubmitなのかは、e.target.type で判断できます。

Comments

[KazuyaKubo623]

ご回答ありがとうございます。
皆さまのご回答のお蔭で自己解決できました！

Answer 3

jQuery v2.1.4 で検証してみましたが、jQuery#on() でイベント定義するだけで期待通りに動作しました。

<form>
  <input type="submit" value="submit">
  <input type="button" value="button">
</form>
<script>
'use strict';
jQuery('form').on('submit', function (event) {
  console.log(event.type + '1');
  event.preventDefault();
});
jQuery('form').on('submit', function (event) {
  console.log(event.type + '2');
});
</script>

Re: KazuyaKubo623さん

Comments

[KazuyaKubo623]

ご回答ありがとうございます。
これで試してみたのですが、submitを押した場合は発火し、buttonを押した場合には発火しませんよね。
説明が下手で申し訳ないのですが、私がやりたいことはどちらでも発火させたいのです。つまり<input type="button" value="button" onclick="javascript:form.submit();">と書いて発火させたいのですが、その場合はどうすればよいのでしょうか？

[think49]

input[type=submit] にHTMLの記述を変更するだけで実現できると思いますが、なぜ input[type=button] で submit したいのでしょうか。
JavaScript でやるなら input.type = 'submit'; で解決ですが、HTMLの記述を変えるほうが格段にスマートだと思います。

[KazuyaKubo623]

私もその方がスマートだと思うのですが、既にあるプロジェクトの中でinput type="button"でsubmitをしなければならない部分がたくさん存在してしまっているのです。。
input type="submit"のものも共存している状態でして、どちらでも同じ処理を行いたいのでメソッドの上書きを考えたのですがそれはできないのでしょうか？

[think49]

> 既にあるプロジェクトの中でinput type="button"でsubmitをしなければならない部分がたくさん存在してしまっているのです。。
仕様を変えられない理由が明確になっていないのではないでしょうか。
input[type=submit] もしくは button[type=submit] を使えない理由が明確になって初めて最適解が決定すると思います。
現状では暫定対応的なコードしか書けませんが、それは良くない対応だと思います。

---
仮に仕様を変えられない現実的な理由があるとして。
先程も書きましたが、JavaScript で input[type=button] を input[type=submit] に書き換える手法も無理なのでしょうか。
jQueryなら下記のようにかけると思います。
jQuery('input[type=button]').prop('type', 'submit');
それが無理であれば、KazuyaKubo623さんが試したようにclick時にsubmitを作動させるしかないと思います。

Answer 4

えっと、ふつうに$('form').submit(function(){...})でイベントを仕掛けるのではなにか問題があるのでしょうか。

Comments

[KazuyaKubo623]

早速のご回答ありがとうございます。
普通にフォームでsubmitする場合はそれで大丈夫なのですが、onclick="javascript:form.submit();"を使いたい部分があるんですね。その場合$('form').submit(function(){...})ではイベントが発火しないのです。。