Question

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

看着这一点并试图弄清楚发生了什么让我感到沮丧。我最近一直在做一个javascript深度潜水，我理解对象，构造函数，原型等等。在css结束时，我知道动画与关键帧，画布，坐标等但看着这个我知道可能是40-50％的javascript写在那里。

1）我知道声明了一个类和构造函数（这对javascript来说相对较新？）

2）jQuery .each方法用于附加标签A1，A2等与setupLabels（）

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实际上是在调用函数以及之后的内容=＆gt;正在定义回调函数？

如果是这样的话，setPosition中的回调是如何工作的，因为它还没有被定义？

Answer 1

JavaScript首先在运行之前编译所有函数名称的列表，因此已定义calculateVelocity 。另外，你是对的，(velX, velY) => {}是回调，并且正在调用该函数。它采用新的Arrow function格式。

以下两者完全相同：

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

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

在setPosition内，this指的是全局对象。在这种情况下，calculateVelocity是全局对象的函数，因此可以通过this.calculateVelocity调用它。

我还应该注意，链接的Codepen中的源JavaScript实际上是TypeScript / ES7。

为什么这个函数声明了两次？声明回调函数在哪里？

1 个答案: