Путаница в ссылках на функции со свойствами в Javascript

Question

В следующем коде 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 has 3"

Однако при запуске из консоли Firebug в Firefox 10.0.2 я получаю:

foo говорит, что "bar имеет 2", bar говорит, что "bar имеет 2", a говорит, что "foo has 2"

Может кто-нибудь объяснить мне последовательность событий, которая происходит за сценой, чтобы сделать это так? Почему a остается связанным с исходной функцией foo (как я и ожидал), но сохраняет значение bar для val?

Answer 1

После этой строки кода:

var a = foo;

a указывает на ту же функцию, на которую указывает foo. В

foo = bar;

Вы переназначаете foo, чтобы указать на то, на что ссылается bar. Это не обновляет ссылку a - оно по-прежнему указывает на функцию, на которую foo также изначально указывал.

Теперь, когда вы запускаете a(), выполняется оригинальная функция. Он захватывает foo (который теперь указывает на ссылку bar) и получает свойство val. val объекта bar равен 2, так что это то, что возвращается.

Это немного сложно объяснить словами ... может быть, диаграмму будет легче понять?

Answer 2

Когда функция foo() выполняется через вызов a(), ее код говорит, что нужно получить значение foo.val, то есть свойство val того, на что foo ссылается в данный момент. Таким образом, ваша a() функция выглядит примерно так:

function a() {
  foo.val =  foo.val || 'no val';
  return 'foo has ' + foo.val;
};

Но foo в этот момент является просто ссылкой на bar.