javascript - EcmaScript 5 Google TechTalk - 范围事故 1 示例

Question

我正在看这个讲座:http://www.youtube.com/watch?v=Kq4FpMe6cRs

// the speaker states that "'bar' is just some function 
// that invokes whatever function is passed to it"
function bar(fn) {
    fn();
}

function foo() {
    var x = 8;
    bar(function baz() { return x; });
}

Object.prototype.x = 'foo';

在第 35 分钟，出现了上面显示的问题。讲师指出，某些浏览器将返回 foo 而不是 8。

为什么？

顺便说一句，在写这个问题时，我想通了，但我还是会发布这个问题，因为这是一个有趣的问题。 :)

---

现场演示: http://jsfiddle.net/simevidas/mHyKc/

Opera 11 提示 'foo'，我所有其他浏览器(包括 IE9)返回 8。

---

更新:我收回我所说的已经解​​决了这个问题。它与嵌套函数是命名函数有关。如果您删除名称 (baz)，Opera 将返回 8，这意味着该问题仅出现在命名的嵌套函数中。

但为什么呢？

Answer 1

我承认我查过了。至少可以说，我认为我不会那么容易地弄清楚这个问题。 http://kangax.github.com/nfe/#spidermonkey-peculiarity

要理解这个问题，命名函数表达式的语义是必要的。引用该链接，“命名函数表达式的标识符仅适用于函数的局部范围。”具体来说，这意味着:

var fn = function aNamedFunction() {
  typeof aNamedFunction;  // "function"
};
typeof aNamedFunction;  // "undefined"

为了实现这个行为，SpiderMonkey 和其他 JS 引擎创建了一个虚拟 environment frame在父框架(即定义函数的范围)和函数的内部框架之间，它在每次调用函数时创建。这个虚拟框架的构造就像调用了 new Object() 一样，并且包含从 aNamedFunction 到函数对象本身的映射。

在问题的代码示例中，x 通过首先查看函数调用的最内层框架来解决。由于函数体没有声明 var x;，因此没有找到它，解释器检查上一级的框架，即虚拟框架。由于虚拟框架是由 new Object()(或语义上等效的东西)创建的，因此在虚拟框架中查找 x 将遍历原型(prototype)链，就像它对任何其他 JavaScript 对象。因此，它搜索 Object.prototype，找到绑定(bind)到 x 的字符串 'foo'，并返回它。

感谢 ES5 一致的词法作用域。

另类阅读:http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/#nfe-and-spidermonkey