instances of nested objects

Question

instances of nested objects

I'm struggling with nested objects and prototyping. In the example below, I am creating 2 instances of object "o".

var o = function(){};

o.prototype = {
val : 1,
test : {
        val2 : 1
    }
};

var t1 = new o();
var t2 = new o();

t1.val = 5;
t2.val = 20;

t1.test.val2 = 5;
t2.test.val2 = 10;

console.log(t1.val) //5
console.log(t2.val) //20

console.log(t1.test.val2) //10
console.log(t2.test.val2) //10

I'm puzzled as to why t1.test.val2 === t2.test.val2, even though t1 and t2 are different variables. Shouldn't they be completely separate entities?

Any suggestions on how to modify the code so that all objects and variables remain distinct?

javascript

Answer 1

Answer №1

Creating a new object results in the prototype being duplicated, however, objects within the prototype are not deep-copied; rather, they are copied by reference. Therefore, every new instance of o will have a referenced copy to the same member objects of the prototype.

To avoid this, construct the test object within your constructor so that each instance has its own unique copy:

var o = function(){
    this.test = {
        val2 : 1
    }
};

o.prototype = {
    val : 1   // This is acceptable as primitive values are not copied by reference
};

Answer 2

Creating a new object results in the prototype being duplicated, however, objects within the prototype are not deep-copied; rather, they are copied by reference. Therefore, every new instance of o will have a referenced copy to the same member objects of the prototype.

To avoid this, construct the test object within your constructor so that each instance has its own unique copy:

var o = function(){
    this.test = {
        val2 : 1
    }
};

o.prototype = {
    val : 1   // This is acceptable as primitive values are not copied by reference
};

Answer 3

Answer №2

The reason for this issue is because you are altering a property of a shared object (specifically, the prototype). Your code can be likened to the following:

var value = 1;
var obj = {
    value2: 1
};

var t1 = {
    value: value,
    obj: obj
};
var t2 = {
    value: value,
    obj: obj
};

t1.value = 5; // modifying property
t2.value = 20; // modifying property

t1.obj.value2 = 5; // changing property of shared object
t2.obj.value2 = 10; // changing property of shared object

To resolve this, avoid using the prototype, like so:

var newObj = function(){
    this.value = 1;
    this.obj = {
        value2: 1
    };
    // each instance now has its own 'obj' property, not shared
};

Answer 4

The reason for this issue is because you are altering a property of a shared object (specifically, the prototype). Your code can be likened to the following:

var value = 1;
var obj = {
    value2: 1
};

var t1 = {
    value: value,
    obj: obj
};
var t2 = {
    value: value,
    obj: obj
};

t1.value = 5; // modifying property
t2.value = 20; // modifying property

t1.obj.value2 = 5; // changing property of shared object
t2.obj.value2 = 10; // changing property of shared object

To resolve this, avoid using the prototype, like so:

var newObj = function(){
    this.value = 1;
    this.obj = {
        value2: 1
    };
    // each instance now has its own 'obj' property, not shared
};

instances of nested objects

Answer №1

Answer №2

Similar questions

What is the process for invoking a page using a JavaScript function?

Unable to retrieve state values or any methods that were declared from renderRow in React-Native

Need a place to keep your data safe while using nodejs?

Implementation of the I18next library

SimpleLightBox refuses to function

What is the fate of the code that comes after executing history. push in React?

What is the proper way to implement JQuery within a constructor function contained in a JavaScript namespace?

What is the best way to showcase a JSON array in a tabular layout?

Vuejs Todolist List App experiences unanticipated alteration in task prop

Obtain the content of the text in the row before by pressing the button within the

Internal Server Error 500: Issue with Ajax/JavaScript

What is the proper way to utilize a date filter with ng-model in AngularJS?

Using the jqLite .html() method directly as a watch listener in AngularJS

React: Updating while in the middle of a state transition is not allowed. Render functions should only be a simple representation of props and state

The Protractor tool (node:9208) threw an UnhandledPromiseRejectionWarning due to an ElementNotVisibleError, indicating that the element is not interactable. Despite this

Display the current date in YYYY/MM/DD format using a single method in React and TypeScript

Is it possible to incorporate dynamic variables into the directives of a nested loop? Plus, thoughts on how to properly declare variables in a node.js environment

How about inputting some text into a field?

Tips for persisting form values even after refreshing the page - a guide to setting form values that stay in place

Node.js: Promise chain abruptly stops after reaching a predefined limit without causing any errors