Javascript 中对具有属性的函数引用的混淆

在下面的 JavaScript 代码中：

function foo() {
  foo.val =  foo.val || 'no val';
  return 'foo has ' + foo.val;
};
function bar() {
  bar.val =  bar.val || 'no val';
  return 'bar has ' + bar.val;
};
var a = foo;
foo.val = '1';
bar.val = '2';
a.val = '3';
foo = bar;
'foo says "' + foo() + '", bar says "' + bar() + '", a says "' + a() +'"';

我期望的是：

foo 说“bar 有 2”，bar 说“bar 有 2”，a 说“foo 有 3”

但是，当从 Firefox 10.0.2 中的 Firebug 控制台运行时，我得到：

foo 说“bar 有 2”，bar 说“bar 有 2”，a 说“foo 有 2”

谁能向我解释一下幕后发生的一系列事件是如何造成的？为什么a保持原样的束缚foo功能（正如我所期望的）但保持bar的价值为val?

这行代码之后：

var a = foo;

a指向同一个函数foo指着。在

foo = bar;

你重新分配foo指向任何事物bar指。这个不更新a的引用 - 它仍然指向该函数foo最初也指出。

现在，当你跑步时a()，执行原函数。它抓住了foo（现在指向bar的参考）并获取其val财产。这val of bar的对象是 2，所以这就是返回的内容。

用语言解释有点困难……也许图表更容易理解？