为什么新设置的属性不在 jQuery object 上保留，但在 dom 元素上保留？

Question

elem is the dom element with id dummy. jElem is the jquery object wrapped around elem .

obj1 has init method which sets a property on the argument passed to it. Here, it creates a new property prop and sets true on it. obj2 is also passed the same argument in its init method. obj2 also has showProp method which prints the property set on the argument passed. Following is the code:

 let elem = document.querySelector("#dummy"); let obj1 = { init(item){ item.prop = true; } }; let obj2 = { init(item){ this.item = item; }, showProp(){ console.log(this.item.prop); } }; obj1.init($(elem)); obj2.init($(elem)); obj2.showProp(); //undefined obj1.init(elem); obj2.init(elem); obj2.showProp(); //true

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="dummy">dummy</div>

My concern is: When jElem is passed in both the objects, the property on jElem is not persisted. But when dom element is passed itself( elem ), the property persists. Why is that?

Answer 1

I am so sorry about the misunderstanding. It was actually dumb of me. I didn't get sleep and was not able to debug properly. The problem was I was writing code as below:

let elem = document.querySelector("#dummy");

let obj1 = {
  init(item){
    item.prop = true;
  }
};
let obj2 = {
  init(item){
    this.item = item;
  },
  showProp(){
    console.log(this.item.prop);
  }
};
obj1.init($(elem));
obj2.init($(elem));
obj2.showProp(); //undefined

obj1.init(elem);
obj2.init(elem);
obj2.showProp(); //true

This is obviously as expected because I am creating a new jQuery object when passing to the function: obj1.init($(elem)) and obj2.init($(elem)); . Here, obviously both the init methods are passed 2 different objects and not the same object.