Geek Answers Handbook

Is a jQuery object passed as an argument to a function a copy of the value, not a reference?

My understanding: Javascript objects and arrays are passed as references, not function argument values. The jQuery group is an object, and therefore should be passed as a reference.

However, I find in the test script below that something strange is happening; The jQuery group behaves like a value, not a link, unless wrapped in another object ... can anyone explain this?

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head> <body> <script> function test(arg){ arg = arg.add($('<span/>')) console.log(arg); }; ele = $('<div/>'); test(ele); // div + span in the group as expected console.log(ele); // only the div - the 'arg' param in function was a copy function test2(arg){ arg.a = arg.a.add($('<span/>')); console.log(arg.a); }; obj = {a:ele}; test2(obj); // div + span in the group as expected console.log(obj.a); // both in the group - arg acted like a reference! </script> </body> </html>
+6
javascript jquery
source share
2 answers

This is the "function" of the .add() method. It does not modify the original jQuery object, but returns a new object with an added value.

Given your first example, you need to return the arg variable and overwrite ele .

  function test(arg){ arg = arg.add($('<span/>')) console.log(arg); return arg; // return the new jQuery object stored in "arg" }; ele = $('<div/>'); ele = test(ele); // overwrite the original "ele" with the returned value console.log(ele);

EDIT: To give another illustration using your code, but with .push() , which modifies the original object, you will see the correct value updated in ele .

  function test(arg){ arg = arg.push($('<span/>')[0]) console.log(arg); // Because .push() is being used, "arg" will reference // the new length of the array. }; ele = $('<div/>'); test(ele); console.log(ele); // Will reference jQuery object with both elements

EDIT: After the last illustration. Since .add() returns a new object, you can update both variables to point to the same value as this:

 ele = arg = arg.add($('<span/>'));

Now, instead of ele , which refers to the original, and arg , which refer to the new Object that was created, both variables contain a reference to the same object in memory.

+3
source share

The two tests you performed do not match. The first sets the arg variable to arg.add(...) , and the second sets the property to arg with the name a to arg.a.add(...) . JavaScript passing by reference is not exactly the same as using other languages ​​(in fact, some will not agree that it is really passing by reference). When you pass a variable whose type is an object, you have a reference to its value, and not to the original variable.

When you set arg = arg.add(...) , you set a new value for the arg variable and override its previous value. This will not change the variable that was transferred, because you do not have a reference to it, you only have a reference to its value (object).

0
source share

More articles:


All Articles