[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