11

Hello a new noob on jQuery here and I was wondering if jQuery objects are immutable. For example:

var obj1 = $("<tag></tag>");
var obj2 = obj1.append("something");

Will obj1 and obj2 be the same meaning obj2 will reference obj1?

UPDATE:

The above example kind of scratches the surface of what i want to know, a more accurate question is : If i chain function from the jQuery api will they return the same object or a new one (as the case with strings in Java)?

hippietrail
  • 15,848
  • 18
  • 99
  • 158
Daniel
  • 1,225
  • 2
  • 15
  • 31
  • Many jQuery methods (not .append) return a new jQuery object due to their nature, do you need a compherensive list of all of those methods or something? It doesn't matter if you're chaining, what matters is what the methods return. `$("div").append("something").bind( "click", fn )` returns the same object while `$("div").parent()` returns a new object while `$("div").html()` doesn't return a jQuery object at all but string – Esailija Nov 16 '11 at 09:54
  • @Esailija I don't need a list, i was just thinking that if you chain and a new object will be returned then that would be a memory leak – Daniel Nov 16 '11 at 10:09
  • 1
    Yes it would, for example `var a = $("div").parent()` will create 2 objects and while it looks like nothing is referring to the first object and it will be garbage collected, the second object actually refers to the first object in its `.prevObject` property so, in this situation, if you store `a` somewhere you will never get rid of the first object even though you are only using the second one. – Esailija Nov 16 '11 at 10:20

7 Answers7

6

Both obj1 and obj2 will be a reference to the jQuery object containing the <tag></tag> element, yes.

If you want to keep a reference to the second element, you could use .appendTo() instead:

var obj1 = $("<p>foo</p>"),
    obj2 = $("<span>bar</span>").appendTo(obj1);
Mathias Bynens
  • 144,855
  • 52
  • 216
  • 248
3

Yes, it obj2 will reference obj1. What it basically does is append whatever given to obj1 and returns the reference.

You may try seeing at console that obj1 and obj2 having the text "something"

console.log(obj1);
console.log(obj2);
Abdul Munim
  • 18,869
  • 8
  • 52
  • 61
3

Assuming I've understood your question, yes, obj2 will be a reference to the object stored in obj1. If you do something to obj2:

obj2.attr("id", "example");

You will see the changes in obj1:

console.log(obj1) //Will show <tag id="example">something</tag>

You can confirm this further by testing the two objects for equality:

console.log(obj1 == obj2) //true
James Allardice
  • 164,175
  • 21
  • 332
  • 312
1

http://jsfiddle.net/rLg9S/

Both object return the same element so yes.

Adam Merrifield
  • 10,307
  • 4
  • 41
  • 58
1

If a function changes which elements are in a selection, then yes, there will be a new object created.

For example:

var link = $('#myLink'),
    span = link.find('span');

link is a different object to span. However, the original object is not actually lost. You can go back to it very easily with the end method, which basically rolls back a manipulation operation.

$('#myLink')
    .find('span') // get the span elements
        .css('color', '#fff')  // modify them
    .end() // go back to the original selection
    .css('font-size', '24px'); // modify that

So if you had a very large number of chained selection calls that didn't use end, you could end up with a very large object (because there would be a chain of objects that referenced the object that made them). This would be incredibly awkward design, however, so it's unlikely that you're doing that, while Javascript's garbage collection should generally mean that objects you've finished with don't hang around in memory.

lonesomeday
  • 233,373
  • 50
  • 316
  • 318
0

You can use $.clone() if you need copy of the object.

var obj2 = obj1.clone().append("something");
Maxim Krizhanovsky
  • 26,265
  • 5
  • 59
  • 89
0
var obj1 = $("<p></p>");
var obj2 = obj1.append("something"); // in this is you just assign the `obj1` object to `obj2`

like:

var x = 5;
var y = x; //here, both x and y are 5

So, obj1 and obj2 will refer the same thing

proof:

console.log(obj1 === obj2);
thecodeparadox
  • 86,271
  • 21
  • 138
  • 164