LoginSignup
2
2

More than 5 years have passed since last update.

ESNextのbind operatorを使って拡張メソッドみたいな事をする

Last updated at Posted at 2017-09-06

bind operatorとは

func.call(obj)obj::func()と書けるシンタックスシュガーです。
::obj.funcと書くとobj.func.bind(obj)となる構文もありますが今回は不要なのでスルーします

今までのJavaScript

ここでは例として引数の文字列を2倍して返す関数twoを作ります

function two(str){
  return str+str;
}

呼び出し

two('x');//'xx'

問題点

この程度なら特に問題はありません。
しかし、文字列加工の処理などで以下のような事になってしまう事ありますよね?

z(y(x(str)));

まず括弧の対応が分かりにくいです。
そして関数はx→y→zの順に呼び出されるのに、見た目はz→y→xと逆になってしまいます。

プロトタイプ拡張は?

名前の衝突などの危険があるので使いたくない。

bind operator

function two(){
  return this+this;
}

呼び出し

"x"::two();

この構文なら綺麗に書けます。
名前衝突の心配もありません。
さっきのz(y(x(str)))str::x()::y()::z()と書けます。

注意

babelが必要です。
あとstage-0なので仕様が変わるかも

tc39

2
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2