Javascript 中的复杂对象答案

【问题标题】：Complex Object in JavascriptJavascript 中的复杂对象
【发布时间】：2013-10-09 06:24:54
【问题描述】：

我有 BookingOrder 类，它是主容器类，我在主容器中有诸如 PickAddress 之类的嵌套类。

如果我们启动一个 BookingOrder 类型的对象，然后我们为 PickupAddress.EnteredAddress 属性分配一个值，然后我们再次尝试启动另一个 BookingOrder 对象，我们会发现这个新对象中的 PickupAddress.EnteredAddress 具有旧值，为什么它不再启动。

点击按钮
它将调用填写订单函数，我将填写 o.PickupAddress.EnteredAddress。
再次单击该按钮。
它会调用fill order函数并启动新的bookingorder()，但它会提醒你o.PickupAddress.EnteredAddress 有value。

我需要知道为什么会发生这种情况以及我应该怎么做才能启动主要复杂对象中的所有对象。

 <!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>

这样做的最佳选择：

<!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>

每次调用构造函数时，它都会返回新的新对象，所有嵌套对象都会在不使用原型的情况下再次启动，并在构造函数中再次清除所有值。

【问题讨论】：

怎么会有人明白你在说什么？更清楚您的问题和代码。
Crockford's Prototypal inheritance - Issues with nested objects 或 javascript prototype inheritance - shared property 的完全相同的副本
我同意介绍性段落的措辞本来可以更清楚，但是如果您查看对所发生情况的列举解释，我似乎完全可以理解。
大家试试我的 HTML 请注意，如果您第一次单击该按钮，您将填写 PickupAddress.EnteredAddress ，再次尝试单击该按钮您会发现 PickupAddress.EnteredAddress 具有值，即使您初始化再次包含 PickupAddress 对象的预订订单。
我将从构造函数之外的原型开始，然后尝试了解原型添加成员和实例特定成员之间的区别：此答案的第一个代码示例可能对此有所帮助：@ 987654323@

标签： javascript prototype-programming

【解决方案1】：

当您引用“PickupAddress”对象时，您始终指的是同一个对象。如果您需要为每个实例刷新它，则必须在构造函数中进行设置。

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

    }

现在对构造函数的每次调用都将确保每个实例都有自己的“PickupAddress”属性和自己的不同值（一个对象）。

【讨论】：

还有另一种方法可以做到这一点，因为我在这个主要复杂对象中有很多复杂对象，所以我需要为每个复杂对象都这样做。
@RoZaR 这就是语言的工作方式。那些作为原型属性值嵌套的对象将被所有实例共享。您必须以某种方式复制它们。
感谢您的回答再次查看我的帖子