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

有人可以帮助我理解为什么Lodash在使用findWhere获取对象时做了一个引用副本，它使我能够将整个变量绑定到范围并根据用户操作动态更改它。但是，使用复制操作完成同样的操作无法更新源对象。我已经把出plunker http://plnkr.co/edit/Phy5xQnGBYsBnenMQHOd?p=preview 了解Lodash - 在javascript中寻找并复制运算符

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="[email protected]" 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代码：

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 
    }; 
});

来源

2014-10-29 WiseWins

对我来说，最后两个console.log始终显示苹果和橙。 – Absor 2014-10-29 21:44:00

吸收 - 道歉！我的错。我已经更新了这个问题以及抢劫犯。 – WiseWins 2014-10-29 22:00:57

inputModel是对字符串的引用，如果更新，则引用将被设置为新字符串。 inputModel2是一个对象的引用，并且你在其中更新了desc字符串。 – Absor 2014-10-29 22:15:29

背景：

服务具有可变对象Object1，Object1有一个变量String2，它是一个字符串的引用。

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

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

案例1：

控制器具有被设置为Object1.String2变量STRING3是从服务的要求。

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

控制器在新数据来自视图时更改String3值。现在String3指向内存位置3. Object1变量String2仍然指向2，因为我们没有修改Object1变量，所以我们修改了变量String3。

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

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

案例2：

控制器有一个设置为Object1是从服务请求的变量对象2。

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

控制器在新数据来自视图时更改Object2.String2值。 Object2.String2现在指向内存位置3. Object2指向Object1，所以Object1.String2实际上被修改为指向内存位置3.由于服务对Object1的引用，它实际上被“更新为服务”。

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

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

来源

2014-10-31 11:30:26 Absor

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

回答

相关问题