Javascript对象分配gottcha

Javascript Object Assignment gottcha

本文关键字：gottcha 分配 对象 Javascript      更新时间：2023-09-26

我在为数据表构建排序按钮时遇到了这个问题。我想让每个排序按钮在DESC（向下排序）和ASC（向上排序）以及非活动（默认排序）之间切换

所以我创建了两个模型，一个是随着程序的进展而改变的模型，另一个是重置值的默认模型

var model = {
  order: {
    field: 'creationDate',
    direction: 'DESC'
  },
  orderDefault: {
    field: 'creationDate',
    direction: 'DESC'
  }
}
$('button').click(function() {
  if (model.order.field == "creationDate") {
    model.order.field = 'newField'
  } else if (model.order.direction == 'DESC') {
    model.order.direction = 'ASC'
  } else {
// This casuses the orderDefault object to be a clone of the order object
// so assignment of values in model.order are refelected in model.orderDefault GOTCHA!!!!
    model.order = model.orderDefault
  }
  $('#result').html('field:' + model.order.field + " direction:" + model.order.direction);
}
)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="btn btn-primary">
  click me
</button>
<div id="result">
</div>
因此，您将看到，在我们重置订单对象之前，一切都按预期进行。当我们在代码中第二次到达这一点时，您将看到它从未重置。orderDefault obj似乎变成了order obj的别名。

答案是，您需要分配orderDefault 的值，而不是分配orderDefault

所以不是

model.order = model.orderDefault

但是

 model.order.direction = model.orderDefault.direction
 model.order.field = model.orderDefault.field

我希望这能帮助到别人。

相关文章：