Complex Object in Javascript

Question

I Have BookingOrder Class it's the main container Class , I have nested classes like PickAddress in thie main container .

If we initiate an object of type BookingOrder then we assign PickupAddress.EnteredAddress Property a value then we try again to initiate another object of BookingOrder we will find PickupAddress.EnteredAddress in this new object has the old value , why it's not initiate again .

Click on the button
it will call fill order function and i will fill o.PickupAddress.EnteredAddress.
Click on the button again .
it will call fill order function and initiate new bookingorder() , but it will give you alert that o.PickupAddress.EnteredAddress has value .

I need to know why is this happening and what i should do to initiate all the objects in the main complex object .

 <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script>
            function BookingOrder() { }
            BookingOrder.prototype = {
                "DriverLng": null,
                "AccountName": null,
                "ParaTransit": false,
                "PickupAddress": {
                    "EnteredAddress": null,
                    "EstablishmentName": null,
                    "GeoPoint": { "lat": 0, "lng": 0 }
                },
                "DropoffAddress": {
                    "EnteredAddress": null,
                    "EstablishmentName": null,
                    "GeoPoint": { "lat": 0, "lng": 0 }
                }
            };
            var o;
            function FillOrder() {
                debugger;
                o = new BookingOrder();
                if (o.PickupAddress.EnteredAddress != null & o.PickupAddress.EnteredAddress != '')
                    alert('Entered Address is not empty');
                else
                    o.PickupAddress.EnteredAddress = 'Test 123'
            }
        </script>
    </head>
    <body>
        <input type="button" onclick="FillOrder()" />
    </body>
    </html>

the best option for doing that like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        function BookingOrder() {
            return  {
                "DriverLng": null,
                "AccountName": null,
                "ParaTransit": false,
                "PickupAddress": {
                    "EnteredAddress": null,
                    "EstablishmentName": null,
                    "GeoPoint": { "lat": 0, "lng": 0 }
                },
                "DropoffAddress": {
                    "EnteredAddress": null,
                    "EstablishmentName": null,
                    "GeoPoint": { "lat": 0, "lng": 0 }
                }
            };
        }

        var o;
        function FillOrder() {
            debugger;
            o = new BookingOrder();
            if (o.PickupAddress.EnteredAddress != null & o.PickupAddress.EnteredAddress != '')
                alert('Entered Address is not empty');
            else
                o.PickupAddress.EnteredAddress = 'Test 123'
        }
    </script>
</head>
<body>
    <input type="button" onclick="FillOrder()" />
</body>
</html>

Each Time you invoke the constructor it will return fresh new object and all the nested objects initiated again without using prototype and clear all the values again in the constructor.

How can anyone understand what you're talking about? Be clearer with your question & code. — Mark Pieszak - Trilon.io, Oct 02 '13 at 18:36
exact duplicate of [Crockford's Prototypal inheritance - Issues with nested objects](http://stackoverflow.com/questions/10131052/crockfords-prototypal-inheritance-issues-with-nested-objects) or [javascript prototype inheritance - shared property](http://stackoverflow.com/questions/15449838/javascript-prototype-inheritance-shared-property) — Bergi, Oct 02 '13 at 18:37
I agree that the wording of the introductory paragraph could have been more clear, but if you look at the enumerated explanation of what happens, it seems perfectly understandable to me. — Pointy, Oct 02 '13 at 18:39
Guys just try my HTML and please note that if you click on the button first time you will fill PickupAddress.EnteredAddress , try again to click the button you will find PickupAddress.EnteredAddress has value even if you initialize the booking order again which contain PickupAddress object . — RoZaR, Oct 02 '13 at 19:43
I would start with taking the prototype outside of the constructor function and then try to understand the difference between prototype added members and instance specific members: the first code example of this answer may be helpful for that: http://stackoverflow.com/a/16063711/1641941 — HMR, Oct 03 '13 at 04:17

score 1 · Accepted Answer · answered Oct 02 '13 at 18:37

1

When you make a reference to the "PickupAddress" object, you're always referring to the same object. If you need that to be refreshed for each instance you'll have to set it in the constructor.

    function BookingOrder() {
      this.PickupAddress = {
            "EnteredAddress": null,
            "EstablishmentName": null,
            "GeoPoint": { "lat": 0, "lng": 0 }
      };

    }

Now each call to the constructor will make sure that each instance has its own "PickupAddress" property with its own distinct value (an object).

answered Oct 02 '13 at 18:37

Pointy

405,095
59
585
614

is there another way to do this because i have a lot of complex object in this main complex object so I need to do this for each complex object . – RoZaR Oct 02 '13 at 19:36
@RoZaR It's just the way the language works. Those objects nested as property values on the prototype will be shared by all instances. Somehow you have to make copies of them. – Pointy Oct 02 '13 at 19:38
Thank you for your answer check my post again – RoZaR Oct 02 '13 at 21:10

Complex Object in Javascript

1 Answers1