[JavaScript] 既存のオブジェクトにメソッドを追加する

  • このエントリーをはてなブックマークに追加
  • LINEで送る

小ネタです。
JavaScriptのグローバルオブジェクトには様々なメソッドが最初から用意されています。例えば文字列を扱うStringには、検索置換するreplace()や一部を取り出すslice()などです。ここに自分で用意したオレオレなメソッドを追加することができます。

結論から言うとprototypeで宣言するだけ。以下の例では文字列中のホワイトスペースをすべて削除する、連続するスペースを1つにまとめてくれるメソッドを追加しています。

/**
 * めっちゃtrimするメソッド
 */
String.prototype.trim2 = function(){
  return(
    this
        .trim()                     // 両端のスペースを削除
        .replace(/\r|\n|\t/g, "")   // 改行とタブを削除
        .replace(/\s{2,}/, " ")     // 複数のスペースを1つにまとめる
  );
}

実際に文字列の後ろにチェーンして利用できるようになります。

" foo   bar ".trim2()  // "foo bar"

なお、利用する箇所よりも前にprototypeで定義しないとエラーとなるのでご注意を。またアロー関数式だとthisの意味が変わってくるのでご注意ください。

- Sponsored Link -

関数じゃダメなの?

普通に関数として定義しても良いのですが、連続して処理を行う場合に関数をネストしまくると非常に見づらくなるのを、メソッドチェーンであれば防ぐことができます。

// メソッドチェーン方式
"Hello".foo().bar().bazz()

// 関数でネストする
bazz( bar( foo("Hello") ) )

ただし、汎用的に利用するわけでないようなメソッドや、(当然といえば当然ですが)オブジェクトに関連性のないようなメソッドは追加すべきではないでしょう。用途に応じて使い分けることになります。

参考ページ

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPal(ペイパル)
PayPalで500円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま
- Sponsored Link -

ご質問やリクエストなどお気軽に。メールアドレスの入力は任意です。書き込みが反映されるまで時間がかかります。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください