Question

有人可以帮助我理解为什么Lodash在使用findWhere获取对象时会执行一个引用副本，这使我能够将整个变量绑定到作用域并根据用户操作动态更改它。但是使用复制操作符完成相同的操作无法更新源对象。我已经拿出了一个傻瓜 http://plnkr.co/edit/Phy5xQnGBYsBnenMQHOd?p=preview

HTML代码：

<html ng-app="angularjs-starter">

  <head lang="en">
    <meta charset="utf-8" />
    <title>Custom Plunker for service response data binding</title>
    <script data-require="lodash.js@2.4.1" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <input type="text" data-ng-model="inputModel" />
    <input type="text" data-ng-model="inputModel2.desc" />
    <button data-ng-click="btnClick()">Click me and check console</button>
  </body>

</html>

JS CODE：

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope,$http) {
  var someServiceResponse = [{"code":"1","desc":"apple"},{"code":"2","desc":"orange"}];
  $scope.inputModel = someServiceResponse[0].desc;
  $scope.inputModel2 = _.findWhere(someServiceResponse,{'code':'2'});
  $scope.btnClick = function(){
    console.log($scope.inputModel);//Outputs the changed value in the text box1
    console.log($scope.inputModel2.desc);//Outputs the changed value in the text box2
    console.log(someServiceResponse[0].desc); // Still shows the old value from the service response - always shows apple
    console.log(someServiceResponse[1].desc); // shows updated value from second text box
  };
});

Answer 1

<强>背景：

Service有一个变量对象Object1，Object1有一个变量String2，它是对字符串的引用。

Object1将a指向内存位置1，变量String2指向包含该字符串的内存位置。

Object = {}
Object1.String2 = ""
Object1 -> 1
Object1.String2 -> 2

案例1：

Controller有一个变量String3，设置为从服务中询问的Object1.String2。

String3现在指向包含字符串的内存地址2.

当新数据来自视图时，Controller会更改String3值。 String3现在指向内存位置3.对象1变量String2仍然指向2，因为我们没有修改Object1变量，我们修改了变量String3。

String3 = Object1.String2
String3 -> 2
Object1 -> 1
Object1.String2 -> 2

String3 = "changed"
String3 -> 3
Object1 -> 1
Object1.String2 -> 2

案例2：

Controller有一个变量Object2，它设置为从服务中提出的Object1。

Object2现在指向包含对象的内存地址1。

当新数据来自视图时，Controller会更改Object2.String2值。 Object2.String2现在指向内存位置3.对象2指向Object1，因此Object1.String2实际上被修改为指向内存位置3.由于服务具有对Object1的引用，它实际上是＃34;更新为服务＆＃34;

Object2 = Object1
Object2 -> 1
Object1 -> 1
Object1.String2 -> 2

Object2.String2 = "changed"
Object2 -> 1
Object1 -> 1
Object1.String2 -> 3

了解Lodash - 在javascript中找到并复制运算符

1 个答案: