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'因為您在函數中修改了該屬性的值。

Answer 2

foo是一個對象，通過引用傳遞。 bar按值傳遞。 當bar被覆蓋時，它會失去與foo.bar的關系。 因此， foo.bar是“a”，這是它在函數中設置的內容。

var foo = {
  bar: {}
};
(function(foo, bar) {
    // foo is {bar:{}}
    // bar is {}
  foo.bar = 'a';
    // now foo is {bar:'a'}
  bar = 'b';
    // now bar is 'b'
    // bar has no relation to foo.bar anymore

}(foo, foo.bar))

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