Javascript 变量作用域之谜

Question

我正在查看我的一些旧代码，我可以看到这一点，这让我很困惑。代码被简化并位于函数（对象）内。

$('#element')
.on('mousedown', function(e){

        var mouseX = e.pageX;

        $('body').on('mousemove', function(e){
            mouseX = e.pageX;
        });

        timer = setInterval(function(){
            console.log(mouseX);
        }, 100);
})
.on('mouseup mouseleave', function(){
    $('body').off('mousemove');
});

我需要 mouseX 在每个间隔触发时保持最新状态，所以当时，当我的编程理解有点粗略时，我只是想，太好了，让我们在另一个事件中更新该变量（鼠标移动）。

我想现在看看 - 那个局部变量如何在另一个范围内更新，这是独立创建的，然后在完全不同的（间隔）范围内成功使用，也是独立创建的？！

代码有效（mouseX 是正确的），它没有在父 function/object.

中创建 "member" 变量

谁能给我讲讲。

Answer 1

这是一个名为 "Clousre"

的概念的结果

...a closure gives you access to an outer function’s scope from an inner function... - MDN.

mouseX 变量在函数中声明，该函数的范围是给定 mousemove 事件侦听器和 setInterval 回调函数的回调函数的顶层，因此, 他们都可以访问 mouseX 变量。

您可以在此处阅读有关 Closures 的更多信息。

Javascript 变量作用域之谜

Javascript variable scope riddle

javascript

scope

local-variables

setinterval

jquery-events