转自st.gg

Angular.js 中 copy 赋值与 = 赋值 区别

　　为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.user 改变？angular.copy 和 = 号赋值有什么区别呢？新手还没有搞懂，请教各位了。

<!DOCTYPE html>

<html>

<script src= "http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

<body>

<div ng-app="myApp" ng-controller="formCtrl">

  <form novalidate>

    First Name:<br>

    <input type="text" ng-model="user.firstName"><br>

    Last Name:<br>

    <input type="text" ng-model="user.lastName">

    <br><br>

    <button ng-click="reset()">RESET</button>

  </form>

  <p>form = {{user }}</p>

  <p>master = {{master}}</p>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('formCtrl', function($scope) {

    $scope.master = {firstName:"John", lastName:"Doe"};

    $scope.reset = function() {

        $scope.user = angular.copy($scope.master);

        // 为什么用 $scope.user = $scope.master; master跟着user改变

    };

    $scope.reset();

});

</script>

</body>

</html>

你可以这么来理解：

  1. 内存里有一段地址储存了 { firstName: "John", lastName: "Doe" } 这个数据，并且最开始用 $scope.master指向了它

  2. 当你 $scope.user = $scope.master 的时候，事实上是让二者同时指向了该数据，因此一个变了另外一个也会跟着变

  3. 当你 $scope.user = angular.copy($scope.master) 的时候，先做了一份该数据的拷贝（也就是内存中多了另外一份数据，值是一样的，但地址肯定不同），然后让 $scope.user 指向了这份拷贝，所以二者指向了不同的内存地址，当然不会相互影响了。

记住，这并非 Angular 的特殊情况，而是编程语言的通用基础。

其实就是一个是拷贝数据，一个是拷贝引用。无论何种编程语言都会有这个问题，所以就会有深拷贝这种概念。

因为项目着急，要用angular.js，修改老是修改出错,都快疯掉了，修改方法还没写，只是动了动数据，数据的属性全变了。唉。加油吧。

(网页)Angular.js 中 copy 赋值与 = 赋值 区别的更多相关文章

  1. 【转】千万不要在JS中使用连等赋值操作

    原文链接 千万不要在JS中使用连等赋值操作   目录 前言 赋值顺序? 连续赋值能拆开写么? 后记 前言 文章标题这句话原本是在国外某JavaScript规范里看到的,当时并没有引起足够的重视,直到最 ...

  2. 秒味课堂Angular js笔记------Angular js中的工具方法

    Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...

  3. angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

    Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...

  4. angular.js 中的作用域 数据模型 控制器

    1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...

  5. Angular.js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...

  6. 在Angular.js中的H5页面调用Web api时跨域问题处理

    /// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...

  7. Angular JS 中的服务注册方法

    在Angular JS中创建服务的几种方法 factory() service() constant() value() provider() factory(name,fn(){}) 该服务为单例的 ...

  8. JS 中的require 和 import 区别整理

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...

  9. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie，Session，Application的用法与区别？ c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

随机推荐

  1. Source Insight函数调用关系显示设置

    当我们需要设置source Insight的项目代码中函数调用关系时,可通过如下的设置来实现: 1.显示函数调用关系窗口 Source Insight工具栏中“View”—>“Relation  ...

  2. linux常用的BootLoader U-boot的前世今生

    U-Boot,全称 Universal Boot Loader,是遵循GPL条款的开放源码项目.U-Boot的作用是系统引导. U-Boot从FADSROM.8xxROM.PPCBOOT逐步发展演化而 ...

  3. 急速JavaScript全栈教程

    3 天前  ·  3k 次阅读 急速JavaScript全栈教程 javascript node.js  mongodb 140 自从一年前发布了Vuejs小书的电子书,也有些日子没有碰过它们了,现在 ...

  4. 课程四(Convolutional Neural Networks)，第三 周（Object detection） —— 1.Practice questions：Detection algorithms

    [解释] tree的两个bounding boxes 都要保留,因为交并比小于0.5:car 0.73保留:pedestrain 0.98保留:motorcycle 0.58保留.一共5个. [解释] ...

  5. Spring Boot 集成 Swagger2 与配置 OAuth2.0 授权

    Spring Boot 集成 Swagger2 很简单,由于接口采用了OAuth2.0 & JWT 协议做了安全验证,使用过程中也遇到了很多小的问题,多次尝试下述配置可以正常使用. Maven ...

  6. 在线画UML图的工具

    工作需要在线画各种UML图,类图.协作图.用例图等等,调查了一些在线画UML图的工具,有的做的很好但要收费,例如:http://www.gliffy.com/,发现现在免费好用的是ProcessOn: ...

  7. 全网最详细的Eclipse和MyEclipse里对于Java web项目发布到Tomcat上运行成功的对比事宜【博主强烈推荐】【适合普通的还是Maven方式创建的】（图文详解）

    不多说,直接上干货! 首先,大家要明确,IDEA.Eclipse和MyEclipse等编辑器之间的新建和运行手法是不一样的. 全网最详细的MyEclipse里如何正确新建普通的Java web项目并发 ...

  8. 使用Spring Boot开发 “Hello World” Web应用

    环境准备 由于现在很多IDE都支持Maven, 所以我们将使用Maven构建该工程: 开始之前,需要先安装Java和Maven: 本工程将基于Spring Boot 1.4.3.RELEASE开发,推 ...

  9. [java初探10]__关于数字处理类

    前言 在我们的日常开发过程中,我们会经常性的使用到数字类型的数据,同时,也会有众多的对数字处理的需求,针对这个方面的问题,在JAVA语言中.提供解决方法的类就是数字处理类 java中的数字处理类包括: ...

  10. nmcli工具详解

    目录 1. nmcli 安装 2. nmcli 基本选项 3. general 常规选项 3.1 status 3.2 hostname 3.3 permissions 3.4 loggin 4. n ...