修改在Javascript中通过引用传递的变量

Question

I was watching a JavaScript talk, and the tutor said that if we pass a property of an object in a function it will actually change the real value, because we will be passing the variable by reference. Here is the slide:

but when I tried to practice the concept, that wasn't the case. Here is my code:

var obj = {val: 5};
function changeVal(x) {
 x = x+5;
 return x;
}
console.log(obj.val) // 5
console.log(changeVal(obj.val)) // 10
console.log(obj.val) // 5

I was expecting obj.val to change to 10. Please tell me what's wrong here, and correct me if I am wrong. Thanks

Answer 1

You are passing not the object , but the primitive type . So when you pass the val of the obj , it is a number and is a primitive type.It copies the val and passes the copy to the object.

If you pass like this, it will work

var obj = {val: 5};

function changeVal( param ) {
 param.val = param.val  + 5;
 return param.val ;
}
console.log(obj.val) // 5
console.log(changeVal(obj)) // 10
console.log(obj.val) // 10

Answer 2

You are not actually passing an object, just passing the value of property(val). If you will pass obj in changeVal(), then it will actually change the value of the property of passed object.

For that you need to do like:

var obj = {val: 5};
function changeVal(x) 
{
    x = x+5;
    return x;
}
console.log(obj.val); // 5
changeVal(obj); // Need to pass object instead of value of the property's value
console.log(obj.val);  // 10

Answer 3

Primitive types (string, integer, boolean, etc...) are immutable, which means if you change one of the values inside a function, the callee (scope which calls your function) will not see the change.

function doSomething(a) {
    a = a + 1;
}
var value = 2;
console.log(value); // result: 2
doSomething(value);
console.log(value); // result: 2

Pass-by-reference only works for objects. Like this:

function doSomething(obj) {
    obj.attribute = obj.attribute + 1;
}
var myObject = {attribute: 2};
console.log(myObject.attribute); // result: 2
doSomething(myObject);
console.log(myObject.attribute); // result: 3

More reading about Javascript types: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

Answer 4

Say for instance you have an Iphone . Now lets say a manufacturing company calls you and asks to borrow your Iphone for a reference just so they can design an Iphone that is similar and sell it to customers . Your original Iphone still exists and is never gone , but every now and then the factory needs to use it for a reference , think of your function as the factory that just make a copy of obj .

//Original data

var obj = {val: 5};

Once your function returns something , it technically becomes a value

Example :

return 3; is a value of 3

so

function changeVal(x) {
 x = x+5;
 return x;
}

is a new value of x which in this case would be x + 5;

x is a copy of whatever you pass into the function .

Hope this helps.