CoffeeScript -> と => の違い

Question

CoffeeScriptの関数定義 の->と => の違いがよく分かりません。
どのように使い分ければよいでしょうか？

Answer 1

JavaScriptのthisは、関数が呼ばれる文脈によって入ってくるものが違い、複雑なルールがあります。
そのため、thisがどの値かが重要になってくるのです。

単純なCoffeeScriptをコンパイルして生成されたコードを見てみます。

c =
  a: -> @
  b: => @

var c;

c = {
  a: function() {
    return this;
  },
  b: (function(_this) {
    return function() {
      return _this;
    };
  })(this)
};

違いは、thisが_thisになっているところと、(function(_this) { return (``})(this);で囲まれていることです。
ブラウザでc.a();のように呼び出すと、cを返しますが、c.b();はWindowオブジェクトを返します。
これは、最後から2行目の})(this)となっている所のthisがWindowオブジェクトを指すためです。

まとめると、=>はその位置でのthisを使いたい、->はもともとのJavaScriptのルールに従ったthisを使いたいということになります。

Comments

[dboyaji]

回答ありがとうございました。

詳しく説明して頂いたので、理解することが出来ました！！

Answer 2

JavaScriptでthisは関数が所属しているオブジェクトを指します。
関数内でコールバック関数を使う場合、
コールバック関数内部ではthisの値は失われてしまいます。
これを避けるため、=>(ファットアロー)を使います。
コールバック関数を => で関数定義をすると、コールバック関数内でthis のプロパティを参照できるようになり
便利です。詳しくは関数バインディングで検索するとよいと思います。