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

小ネタです。
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の意味が変わってくるのでご注意ください。

関数じゃダメなの？

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

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

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

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

参考ページ

• オブジェクト指向 JavaScript 入門 – MDN
• String – MDN

このブログを応援する

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

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

- Sponsored Link -