Friday, June 27, 2014

続 Coffee Script

関数の呼び出し.

hello = (_option) ->
  "hello #{if _option? then _option else ''} world"

console.log ">function"
console.log hello
console.log hello.name
console.log hello()
console.log hello "cruel"
実行結果.
>function
[Function]

hello  world
hello cruel world
引数を指定しなくても関数をコール出来るので、hello, hello(), hello “cruel”がどんな結果を返すか見てみたら…
関数を呼び出しているのは
  • hello()とhello “cruel”
関数そのものを指しているのは
  • hello
見た目の共通性ではhello, hello “cruel”が同じように見えるのがたまらない…

それらしい書き方

本家のリファレンスを訳してくれてる人がいたー!
http://blog.h13i32maru.jp/entry/20120119/1326955300
プログラム例がだいぶ分かりやすい.

関数の中に関数

play = (title) ->
  @title = title
  console.log("play ")
  mode = (_mode) ->
    console.log "  " + @title + " with " + _mode

play("yukarin world")("single")

makiworld = play "makimaki no sekai"
makiworld("multi")
playが最後にsingle = -> … を実行するので返ってくるのはmode関数本体.
これを意図通り実行するには関数呼び出し()を2回繰り返す必要がある. 2パターンで試してみてどちらも期待する結果.

関数束縛

関数定義の際に「=>」を使うことで関数呼び出し元をthisに固定できる. 生成されたjavascriptを見ると何やってるかおおよそ理解. 上と同じく関数をネストさせて呼び出し元のthisをキープしている.
coffee script
bindplay = (title) ->
  @title = title 

  console.log("play ")
  mode = (_mode) =>
    console.log "  " + @title + " with " + _mode

play = (title) ->
  @title = title
  console.log("bind play ")
  mode = (_mode) ->
    console.log "  " + @title + " with " + _mode
javascript
  bindplay = function(title) {
    var mode;
    this.title = title;
    console.log("play ");
    return mode = (function(_this) {
      return function(_mode) {
        return console.log("  " + _this.title + " with " + _mode);
      };
    })(this);
  };

  play = function(title) {
    var mode;
    this.title = title;
    console.log("bind play ");
    return mode = function(_mode) {
      return console.log("  " + this.title + " with " + _mode);
    };
  };
具体的な違いの確認はブラウザ込み(eventhandler)でやらないと駄目かなぁ. htmlカキタクナイ.

No comments:

Post a Comment