javascript - setTimeout 是否创建函数实例？

Question

这可能是一个菜鸟问题。下面的代码就像我想要的那样工作，但我不知道为什么。

var x = 0

init_page = function(){
    x++;


    var y = x;

    setTimeout(go, 1000);
    function go(){
        $('body').append('<div>Y: '+y+'</div>');
    }

}
init_page();

Demo

如果您快速单击链接几次，它将打印 1,2,3,4...

我的问题是它们都调用相同的函数，但它的行为就好像函数已经像这样实例化了:

    function go1(){
        $('body').append('<div>Y: 1</div>');
    }
    function go2(){
        $('body').append('<div>Y: 2</div>');
    }
    function go3(){
        $('body').append('<div>Y: 3</div>');
    }

他们不应该都打印执行时相同的数字(最大的数字)而不是点击时的数字吗？我希望看到 4,4,4,4，因为 go() 对于所有间隔都是相同的函数。

Answer 1

这种技术在 Javascript 中被称为“闭包”。当内部函数可以访问外部函数的作用域并保留外部作用域以供特定调用时。当“setTimeout”执行“go”函数时，这实际上发生在您的代码中 - 它保留每次调用的“init_page”函数的外部作用域状态。

闭包是 javascript 中强大的功能之一，您可以查看以下使用它们可以实现的示例:

1. 封装 - 将函数成员设置为私有(private)(只能在函数(对象)范围内访问)。
2. 在循环内部处理异步调用时保留外部作用域状态。 (在你的情况下设置超时)

在这里您还可以找到一些详细的答案:How do JavaScript closures work?