Javascript:了解包装在函数中的变量

Question

试图将我的头脑围绕在 Javascript 范围内，并寻找某人来解释下面发生的事情。希望它不仅对我有帮助...

var foo = {
  bar: {}
};
(function(foo, bar) {
  foo.bar = 'a';
  bar = 'b';

}(foo, foo.bar))

console.log(foo.bar) // prints 'a', not 'b', how come? 

Answer 1

你定义了两个变量:

function(foo, bar)

您将两个值传递给它们:

}(foo, foo.bar))

foo 的值是对对象的引用(该对象具有属性 bar，其值是对不同对象的引用)

变量 bar 的值是对第二个对象的引用。

foo.bar = 'a';

您用字符串 'a' 覆盖了第一个对象的 bar 属性。 foo.bar 不再是对第二个对象的引用。 bar 的值仍然是对第二个对象的引用。

bar = 'b';

您用字符串 'b' 覆盖本地 bar 变量。现在没有对剩下的第二个对象的引用。第二个对象将被垃圾收集。

console.log(foo.bar)

您输出 foo 的值引用的对象的 bar 属性的值。这是 'a'，因为您在函数中修改了该属性的值。