javascript - 在 Javascript 函数内缓存值

Question

我有一个简单的 Javascript 方法(对象的成员函数)，它保留内部缓存(以避免不必要的 ajax 请求。)

我一定对 Javascript 作用域规则或其他东西感到困惑，因为如果缓存的更新是在嵌套函数中进行的，则它们似乎不可见。

例如:

window.mynamespace = window.mynamespace || { };
window.mynamespace.foo = function()
{
    this.cache = this.cache || { };

    alert(JSON.stringify(this.cache));

    this.cache["foo"] = "bar";
}

这是一个简单的示例，旨在演示在调用 mynamespace.foo() 时会记住插入到缓存中的项目。

在我的 onload 或 $(document).ready() 处理程序中，如果我说:

window.mynamespace.foo();
window.mynamespace.foo();

我收到两个警报，第一个显示 {}，第二个显示 {"foo": "bar"}。好吧，太好了，这正是我所期望的。所以我的缓存似乎可以工作。

但是...如果我尝试从嵌套函数中更新缓存(特别是在某些异步操作的回调处理程序中)，我的缓存的更新似乎没有传播。

例如:

window.mynamespace = window.mynamespace || { };

window.mynamespace.foo = function()
{
    var instance = this;

    this.cache = this.cache || { };

    alert(JSON.stringify(this.cache));

    window.setTimeout(
        function()
        {
            instance.cache["foo"] = "bar";
        },
        0
    );
}

在这里，我从嵌套函数(window.setTimeout 的回调处理程序)中更新缓存。

在这种情况下，如果我从文档 onload 处理程序中调用 window.mynamespace.foo() 两次，我会收到两个警报，每个警报都会显示 {} - 一个空对象。所以现在我的缓存没有更新。

好吧，我对 Javascript 作用域规则的理解有些被打破了。我意识到 this 的含义与嵌套函数中的不同，这就是为什么我专门使用 instance 变量，它始终引用 window.mynamespace.foo 对象。

请告诉我我的错误。

Answer 1

等待时间为 0ms 的 window.setTimeout 将清除调用堆栈。发生的事情是:

已清除的调用堆栈状态:

5) key 从第一次 foo 调用 setTimeout 开始设置

6) key 从第二个 foo 调用 setTimeout 中设置

调用堆栈的顶部框架:

1) foo 首先被调用

3)第二个 foo 调用

调用堆栈的 FOO 框架:

2) 第一次调用 foo 实例化缓存并警告空对象

4) foo 的第二次调用提醒空对象

这是一个确认此行为的 jsfiddle:

http://jsfiddle.net/jhgeh4c5/1/