JavaScript、関数に処理を追加

謎のプリン語る。
プログラミングの役立つ情報とか、どうでもいい雑談とか書いてます。
一人書く人増えました。

JavaScript、関数に処理を追加

2016年05月16日

みやびプリン 500 316

500 320

JavaScript、関数に処理を追加 - サムネイル

※この記事は8年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

お疲れ様です。

さっそく表記の件。
ページ間で共通で読み込み、各々で違う処理をさせたいってなったので、
(例えばウィンドウリサイズ時に、起動させるメソッドは一緒だけど、ページごとに追加処理をさせたい、とか)
いろいろ探してみた。
が、
うまい方法が見つからなかった・・・。
ひとまず思いついた方法が下記。

//ラッパークラスを定義
var $wrapperObjClass = function(c){
  //コンストラクタ起動時に、初期化関数を実行するようにしている。
  if(c){
    this.init(c, true);
  }
};

//初期化メソッドと処理メソッドを定義
$wrapperObjClass.prototype = {
  init: function(c, f){
    var orignTestFunc = this.testFunc;
    this.testFunc = function(f){
      orignTestFunc(f);
      if (c) {
        try {
          c(f);
        } catch(e) {
          console.log(e);
        }
      }
    };
  },
  testFunc: function(f){
    console.log('そうだよ');
  }
};

//インスタンス格納(コンストラクタ起動)
var $testFuncInstanse = new $wrapperObjClass(function(){
  console.log('アホだよ');
});
$testFuncInstanse.testFunc(); //出力:そうだよアホだよ

クラスメソッド(コンストラクタで起動している初期化メソッドinit)定義時に、
11行目で、拡張したい関数のもともとのメソッドを、変数に格納して逃がし、
次の行からもともとのメソッドを定義し直して、
その中で、元メソッドと、追加処理を実行している。

下記エントリを参考にしている。
(やってることはほとんど一緒)

javascript:既存の関数を拡張する(処理を追加する) - Qiita

なんかもっとスマートな方法ないんかね・・・。
jQueryだと、onとかで、処理を追加なんてやってるけど、
jQueryの中身を研究するなんて、めんどくさくてやってられんし、
探してもやっぱこんな方法しか思いつかなかった。

これでいくしかないか・・・。

誰かもっとスマートな方法あったら教えてほしい。。。

トラックバック(0)

トラックバックURL:

コメントする

ページトップへ戻る