この関数はなぜ2回宣言されていますか？コールバック関数はどこで宣言されていますか？

Question

http://codepen.io/Lewitje/pen/GjqbbA

これを見て、何が起こっているのか理解しようとすると、私を落胆させます。私は最近、JavaScriptの深いダイビングを行ってきました。オブジェクト、コンストラクタ、プロトタイプなどを理解していますし、CSSフレームでアニメーションを知っています。これを見ても、おそらく40-50％のjavascriptがあります。そこに書かれている。

1）私は

）（setupLabelsでラベルA1、A2などを取り付けるために使用される.each方法jQueryの（これはJavaScriptに比較的新しいのですか？）

2）クラスとコンストラクタが宣言されていることを知っています

3）ダイヤル上にパンチ数を表示するために異なる様々な機能は、移動し、アームを移動させることができる等、それは私のために混乱取得

さて、これは：

setPosition(x, y, callback){ 
    $('.hand').on('transitionend',()=>{ 

     $('.hand').off('transitionend'); 

     setTimeout(function(){ 
      callback(); 
     }, 500); 

    }); 

    this.calculateVelocity(x, y, (velX, velY)=>{ 
     $('.arm').css({ 
      'top': (y + 35) + 'px', 
      'transition-duration': velY + 's' 
     }); 

     $('.hand').css({ 
      'left': (x + 5) + 'px', 
      'transition-duration': velX + 's', 
      'transition-delay': velY + 's' 
     }); 
    }); 
} 

calculateVelocity(x, y, callback){ 
    var currentX = $('.hand')[0].offsetLeft; 
    var currentY = $('.arm')[0].offsetTop; 

    var velX = Math.ceil((Math.max(currentX, x) - Math.min(currentX, x))/70); 
    var velY = Math.ceil((Math.max(currentY, y) - Math.min(currentY, y))/70); 

    callback(velX, velY); 
} 
} 

私はthis.calculateVelocityがinfactであると推測しています。関数をコールした後、=>コールバック関数を定義していますか？

setPositionのコールバックは定義されていないため、どのように機能しますか？

Answer 1

JavaScriptは、実行前にすべての関数名のリストをコンパイルすることから始まります。したがって、calculateVelocityにはが定義されています。また、正しいです、(velX, velY) => {}がコールバックであり、関数が呼び出されています。新しいArrow function形式です。以下の

両方が同一である：

内部

this.calculateVelocity(x, y, (velX, velY) => { 
    ... 
}); 

this.calculateVelocity(x, y, function(velX, velY) { 
    ... 
}); 

、thisは、グローバルオブジェクトを指します。この場合、calculateVelocityはグローバルオブジェクト上の関数なので、this.calculateVelocityで呼び出すことができます。

リンクされたCodepenのソースJavaScriptは、実際にはTypeScript/ES7です。