在 setTimeout 中使用 JavaScript 闭包

Question

我使用 setTimeout 来模拟渲染，我得到了这样的结构：

var Renderer = new Class (
{
    Implements: Events,

    initialize()
    {
        this.onRender();
    },

    onRender: function()
    {
        // some rendering actions
        setTimeout(this.onRender.bind(this), 20);
    }
});

该代码是否由于闭包的无限嵌套而存在潜在的内存泄漏？还是一切都好？到目前为止，我唯一的解决方案是将其重写为通常的方式，

function Renderer()
{
    var onRender = function()
    {
        // rendering
        setTimeout(onRender, 20);
    };
    onRender();
};

但我不想丢失 Mootools 事件和类。 由于某些原因，我也不能使用“单例”（如 window.renderer = new Renderer();）

Answer 1

您的代码很好，但安迪的回答具有误导性，因为它混淆了 范围链与执行上下文，以及扩展调用堆栈。

首先，setTimeout 函数不会在全局范围内执行。它们仍然在闭包中执行并且可以从外部作用域访问变量。这是因为 JavaScript 使用静态作用域；也就是说，函数的作用域链是在函数创建时定义的，并且永远不会改变；作用域链是函数的一个属性。

执行上下文与作用域链不同且独立，因为它是在调用函数时构造的（无论是直接 - func(); – 或作为浏览器调用的结果，例如超时到期）。执行上下文由激活对象（函数的参数和局部变量）、作用域链的引用以及 this 的值组成。

可以将调用堆栈视为执行上下文的数组。堆栈的底部是全局执行上下文。每次调用函数时，其参数和 this 值都会存储在堆栈上的新“对象”中。

如果我们将 onRender 函数更改为简单地调用自身 (this.onRender())，堆栈将很快溢出。这是因为控制永远不会离开每个连续的 onRender 函数，从而允许其执行上下文从调用堆栈中弹出。相反，我们越来越深入地让每个 onRender 等待下一个 onRender 返回，这是一个只有在堆栈溢出时才会中断的无限循环。

但是，通过调用 setTimeout，控制会立即返回，从而能够离开 onRender 函数，导致其执行上下文从堆栈中弹出并被丢弃（由 GC 从内存中释放）。

当超时到期时，浏览器从全局执行上下文发起对onRender的调用；调用堆栈只有两层深。有一个新的执行上下文 - 默认情况下它将继承全局范围作为其 this 值；这就是为什么您必须绑定到您的Renderer对象 - 但它仍然包含您第一次定义onRender时创建的原始作用域链。

正如您所看到的，您没有通过递归创建无限闭包，因为闭包（范围链）是在函数定义时创建的，而不是在函数调用时创建的。此外，您不会创建无限的执行上下文，因为它们在 onRender 返回后被丢弃。

我们可以通过测试来确保您没有泄漏内存。我让它运行了 500,000 次，没有观察到任何内存泄漏。请注意，最大调用堆栈大小约为 1,000（因浏览器而异），因此它绝对不是递归的。