Transferring Javascript properties to a new instance

Question

Transferring Javascript properties to a new instance

In the realm of Javascript, let's consider a scenario where we have the following structure:

obj1.prop1.prop1_1.prop1_1_1 = 3;

Now, when this code is executed, the value 3 should be set in the same pathway within obj2. Essentially, it should mirror the action of:

obj2.prop1.prop1_1.prop1_1_1 = 3;

All of this needs to be done under the condition that obj2 does not initially contain prop1.prop1_1.prop1_1_1.

One approach could involve overriding obj1.prop1 so that it points to obj2.prop1. However, obj2.prop1 must also be assigned with an instance identical to that of obj1.prop1. How can we achieve this intricate task?

javascript properties overriding

Answer 1

Answer №1

It seems like you're looking to update the property prop1_1_1 on one object and have it automatically update on another object as well.

This can be achieved using property getters and/or setters in ES5, although this approach may not be advisable.

Here's a demonstration where the getter on obj2.prop1.prop1_1.prop1_1_1 retrieves the value from obj1:

var obj1 = {
    prop1: {
        prop1_1: {
            prop1_1_1: 42
        }
    }
};
var obj2 = {
    prop1: {
        prop1_1: {
        }
    }
};
Object.defineProperty(obj2.prop1.prop1_1, "prop1_1_1", {
    get: function() {
        return obj1.prop1.prop1_1.prop1_1_1;
    }
});
console.log("obj1.prop1.prop1_1.prop1_1_1 = " + obj1.prop1.prop1_1.prop1_1_1); // 42
console.log("obj2.prop1.prop1_1.prop1_1_1 = " + obj2.prop1.prop1_1.prop1_1_1); // 42
obj1.prop1.prop1_1.prop1_1_1 = 3;
console.log("obj1.prop1.prop1_1.prop1_1_1 = " + obj1.prop1.prop1_1.prop1_1_1); // 3
console.log("obj2.prop1.prop1_1.prop1_1_1 = " + obj2.prop1.prop1_1.prop1_1_1); // 3

Live Example (view console) | Code Source

Answer 2

It seems like you're looking to update the property prop1_1_1 on one object and have it automatically update on another object as well.

This can be achieved using property getters and/or setters in ES5, although this approach may not be advisable.

Here's a demonstration where the getter on obj2.prop1.prop1_1.prop1_1_1 retrieves the value from obj1:

var obj1 = {
    prop1: {
        prop1_1: {
            prop1_1_1: 42
        }
    }
};
var obj2 = {
    prop1: {
        prop1_1: {
        }
    }
};
Object.defineProperty(obj2.prop1.prop1_1, "prop1_1_1", {
    get: function() {
        return obj1.prop1.prop1_1.prop1_1_1;
    }
});
console.log("obj1.prop1.prop1_1.prop1_1_1 = " + obj1.prop1.prop1_1.prop1_1_1); // 42
console.log("obj2.prop1.prop1_1.prop1_1_1 = " + obj2.prop1.prop1_1.prop1_1_1); // 42
obj1.prop1.prop1_1.prop1_1_1 = 3;
console.log("obj1.prop1.prop1_1.prop1_1_1 = " + obj1.prop1.prop1_1.prop1_1_1); // 3
console.log("obj2.prop1.prop1_1.prop1_1_1 = " + obj2.prop1.prop1_1.prop1_1_1); // 3

Live Example (view console) | Code Source

Answer 3

Answer №2

Assuming T.J. Crowder's theory is correct, you have the ability to perform the following actions:

obj1.prop1.prop1_1.prop1_1_1= [3]


obj2.prop1.prop1_1.prop1_1_1= obj1.prop1.prop1_1.prop1_1_1

When altering obj2.prop1.prop1_1.prop1_1_1[0], it will also impact obj1.prop1.prop1_1.prop1_1_1[0]. This occurs because when you define it as [3], an Array object is created and its reference (or pointer) is stored in obj1.prop1.prop1_1.prop1_1_1. Therefore, both obj1.prop1.prop1_1.prop1_1_1 and obj2.prop1.prop1_1.prop1_1_1 share a reference to the same array. Despite there being only one array in memory, two references exist, causing changes made to one to be reflected in the other.

If you assign obj1.prop1.prop1_1.prop1_1_1= 3, where prop1_1_1 is a primitive data type rather than an object reference, executing

obj1.prop1.prop1_1.prop1_1_1= obj2.prop1.prop1_1.prop1_1_1

results in the value 3 being copied to the other variable. Consequently, two distinct memory locations now hold the value 3, allowing modifications to one without affecting the other.

Answer 4

Assuming T.J. Crowder's theory is correct, you have the ability to perform the following actions:

obj1.prop1.prop1_1.prop1_1_1= [3]


obj2.prop1.prop1_1.prop1_1_1= obj1.prop1.prop1_1.prop1_1_1

When altering obj2.prop1.prop1_1.prop1_1_1[0], it will also impact obj1.prop1.prop1_1.prop1_1_1[0]. This occurs because when you define it as [3], an Array object is created and its reference (or pointer) is stored in obj1.prop1.prop1_1.prop1_1_1. Therefore, both obj1.prop1.prop1_1.prop1_1_1 and obj2.prop1.prop1_1.prop1_1_1 share a reference to the same array. Despite there being only one array in memory, two references exist, causing changes made to one to be reflected in the other.

If you assign obj1.prop1.prop1_1.prop1_1_1= 3, where prop1_1_1 is a primitive data type rather than an object reference, executing

obj1.prop1.prop1_1.prop1_1_1= obj2.prop1.prop1_1.prop1_1_1

results in the value 3 being copied to the other variable. Consequently, two distinct memory locations now hold the value 3, allowing modifications to one without affecting the other.

Transferring Javascript properties to a new instance

Answer №1

Answer №2

Similar questions

Looking to display the precise information from an opened Accordion in a modal window for updating purposes with Django

An error has occurred in NodeJS: Value undefined is out of the acceptable range for an unspecified property in the options

Comparing functions and function issues when using onClick in JavaScript

JavaScript animation is not functioning as expected

Adding an information panel to each column in jqgrid allows the grid to display a scrolling feature

VueJS Hotel Reservation Datepicker: Trouble retrieving selected check-in date using event listener

jQuery's callback handling often reverses the statement I just made

Tips for switching a group of buttons within a userscript by clicking a single button?

Avoiding triggering the parent event from the child in React

Importing or loading a JavaScript file in Vue.js is a crucial step

Present Different Content for Visitors Using Ad-Blocking Software

Merging the `on('click')` event with `$(this)`

What exactly does Apple consider as a "user action"?

Encountering a problem with the state error while trying to modify an input field during onChange event

How to transform a JQuery button into a dropdown menu

Prioritize moving the JavaScript onload handler to the end of the queue

Subsequent calls to React's setState with an array are causing duplicate items to be appended twice

Using JavaScript to toggle the visibility of grids depending on the radio button choice and then triggering this action by clicking on the search button

When using jQuery's `.click()` method on an element to collapse it with the 'show' parameter set to false, the disabling action will only take effect after the document

Navigating the file paths for Vue.js assets while utilizing the v-for directive