Javascript在函数内部使对象文字等于{}，

Question

How to understand this output?

Why data.value is still equal to 'value'?

 function funcA(data) { data.key = 'data'; } function funcB(data) { data = {}; data.value = 'data'; } var data = { key: 'key', value: 'value' }; funcA(data); funcB(data); console.log(data.key); //data console.log(data.value); //value 

Please help. I do not know how to understand this question. Thanks for helping in advance.

Answer 1

You have to understand how objects are passed in JavaScript functions. It's a reference to an object in memory that's being passed. Once you do data = {} in funcB , the function's local copy of the reference data now points to a new, empty object, not the original location of data as defined outside of the function. Then the line data.value = 'data' simply modifies that local, empty object, not the original object.

Answer 2

This data = {}; just updates the local parameter, not the original variable.

If JS was a "pass by reference" language, that would work, but it isn't. You're passing a "reference type" , but are passing it "by value" , so only the value (the object's reference) gets updated to a new instance.

Answer 3

Arguments are passed by value, but the names of arguments are not the same as the values. In your funcB() you have a couple things going on that are confusing because the names are all the same.

function funcB(data) {
  // the **name** `data` is not the same as the data you declared earlier
  // even though they both point to the same object
  // this inner data shadows the outer data

  data = {};
  // now you set the inner `data` name to point to a new object and you have two datas
  // one outside that you set with var data and this one. Since you can only have one
  // data name in the scope the inner one wins.
  data.value = 'data';
  // changing data here only changes the inner one.
}

It's easier to see if you use distinct names:

 function funcB(inner_data) { // the name inner_data and data both point to the same object console.log(inner_data === data) // now inner_data points to something else inner_data = {}; inner_data.value = 'data'; } var data = { key: 'key', value: 'value' }; funcB(data); console.log(data.key); //data console.log(data.value); //value 

The confusion happens because if you didn't name your argument data you could still access the outer data from the function. For example:

 function funcB(inner_data) { // the name inner_data and data both point to the same object console.log(inner_data === data) // but since you're not shadowing the outer data with // a new name in this scope you can still reach outer data data = {}; data.value = 'data'; } var data = { key: 'key', value: 'value' }; funcB(data); console.log(data.key); //data console.log(data.value); //value 

Answer 4

first you should already know that when u assign an object to a variable this variable will hold a reference to this object's data in the memory

a reference is nothing but a memory location so that we know where the data of the object is stored

js has something called Call by sharing , i had troubles understating it but after a little search my conclusion was :

if you just changed property of an object inside a function scope , it will affect the variable globally (outside the function scope) cause u changed the values of the object that this variable is referencing not the reference itself , like your funcA

unless you re-assigned a new object to this variable, in this case you are changing where your variable referencing , its now referencing to something else so any change you do to it inside the function will not affect the variable values outside the function , funcB doesn't affect the variable globally (outside of the function scope) because it creates a new local object with a new reference which is scoped to the function only

as for primitive types they will always be pass by value , so any changes made to them will only affect the variable in the scope of the function making the change