javascript - 需要帮助理解这段代码中闭包的用法

Question

这是我为管理 Canvas 元素上的平板电脑手势而编写的一些代码的简化片段

第一个函数接受元素和回调字典并注册事件并添加其他功能，例如“按住”手势:

function registerStageGestures(stage, callbacks, recieverArg) {
    stage.inhold = false;
    stage.timer = null;

    var touchduration = 1000;
    var reciever = recieverArg || window;

    stage.onLongTouch = function(e) {
        if (stage.timer) clearTimeout(stage.timer);
        stage.inhold = true;
        if (callbacks.touchholdstart) callbacks.touchholdstart.call(reciever, e);
    };

    stage.getContent().addEventListener('touchstart', function(e) {
        e.preventDefault();
        calcTouchEventData(e);
        stage.timer = setTimeout(function() {
            stage.onLongTouch(e);
        }, touchduration);
        if (callbacks.touchstart) callbacks.touchholdstart.call(reciever, e);
    });

    stage.getContent().addEventListener('touchmove', function(e) {
        e.preventDefault(); 
        if (stage.timer) clearTimeout(stage.timer);

        if (stage.inhold) {
            if (callbacks.touchholdmove) callbacks.touchholdmove.call(reciever, e);

        } else {
            if (callbacks.touchmove) callbacks.touchmove.call(reciever, e);
        }
    });

    stage.getContent().addEventListener('touchend', function(e) {
        e.preventDefault();
        if (stage.timer) clearTimeout(stage.timer);
        if (stage.inhold) {
            if (callbacks.touchholdend) callbacks.touchholdend.call(reciever, e);
        } else {
            if (callbacks.touchend) callbacks.touchend.call(reciever, e);
        }
        stage.inhold = false;
    });
}

后来我在同一页面中的几个元素(由“View”对象表示)上调用registerStageGestures。像这样的东西:

function View() {
    var self=this;
    ..

    function InitView() {
       ...

       registerStageGestures(kineticStage, {
        touchstart: function(e) {
            // do something
        },
        touchmove: function(e) {
            // do something
        },
        touchendunction(e) {
            // do something
        },
        touchholdstart: function(e) {
            // do something
        },
        touchholdmove: function(e) {
            // do something
        },
        touchholdend: function(e) {
            // do something
        },
    }, self);

一切正常，但是我对 registerStageGestures 的实现中的两件事感到好奇:

首先，是否需要让inhold、timer和onLongTouch成为stage的成员？或者如果闭包是 registerStageGestures 中的本地变量，那么闭包会让一切正常运行吗？

第二，是否有必要使用“.call(receiver,”语法调用回调？我这样做是为了确保回调代码将在 View 的上下文中运行，但我不确定是否需要它？

非常感谢任何意见

谢谢!

Answer 1

First, is it necessary to make inhold, timer and onLongTouch members of the stage ? or will closures make everything works well if they are local vars in registerStageGestures ?

就registerStageGestures()而言，var inhold、vartimer和function onLongTouch(e) {.. .}。就足够了。内部函数自动访问其外部函数成员的机制称为“闭包”。如果其他代码需要访问这些设置，则只需设置 stage.inhold、stage.timer 和 stage.onLongTouch 舞台的属性。

Second, is it necessary to call the callbacks with '.call(receiver,' syntax ? I'm doing this to make sure the callback code will run in the context of the View but I'm not sure if it's needed ?

可能，取决于这些回调的编写方式。在调用内部使用 this 的函数时，有时会使用 .call() 和 .apply()。在这两种情况下，传递的第一个参数定义了要解释为 this 的对象。因此，JavaScript 为您提供了定义通用方法的方法，而无需先验假设调用这些方法时将应用到哪些对象。类似地，您可以调用一个对象的方法，使其作用于另一个对象。

编辑:

为了完整起见，请注意，即使函数中没有 this，.apply() 也非常有用，因为它允许将多个参数指定为单个数组的元素，例如无处不在的 jQuery.when.apply(null, arrayOfPromises)...