読者です 読者をやめる 読者になる 読者になる

うまとま君の技術めも

2015年新卒入社した社畜の勉強内容などなど

CoffeeScriptのファットアローって何だ?

CoffeeScript JavaScript

ファットアロー

jQueryのコールバック関数で呼ばれた関数でthisを使うと関数内のjQueryオブジェクトを指しているため、
that = @等と関数外で別の変数に置き換えて使用することがあると思います。

coffee

class User
  constructor: (first_name, last_name) ->
    @full_name = "#{first_name} #{last_name}"
    
    that = @
    $("#action-hello").click ->
      alert "My name is #{that.full_name}."

js

var User;

User = (function() {
  function User(first_name, last_name) {
    var that;
    this.full_name = "" + first_name + " " + last_name;
    that = this;
    $("#action-hello").click(function() {
      return alert("My name is " + that.full_name + ".");
    });
  }

  return User;

})();

そんな時、アロー->ではなくファットアロー=>を使ってあげると
@に対してスコープ外のthisへと自動的に置き換えを行ってくれます。

coffee

class User
    constructor: (first_name, last_name) ->
    @full_name = "#{first_name} #{last_name}"
    
    $("#action-hello").click =>
        alert "My name is #{@full_name}."

js

var User;

User = (function() {
  function User(first_name, last_name) {
    this.full_name = "" + first_name + " " + last_name;
    $("#action-hello").click((function(_this) {
      return function() {
        return alert("My name is " + _this.full_name + ".");
      };
    })(this));
  }

  return User;

})();

感想

ファットアローなんてものがあったんですね、知らなかった自分が情けないです。。。