js有两种类型的值：
栈：原始数据类型（undefinen,null,boolead,number,string）
堆：引用数据类型（对象，函数和数组）
两种类型的区别是：储存位置不同，
原始数据类型直接存储在栈（stack）中的简单数据段，占据空间小，大小固定，属于被频繁使用的数据，所以放入栈中存储；
引用数据类型存储在堆（heap）中的对象，占据空间大，大小不固定，如果存储在栈中，将会影响程序运行的性能，引用数据类型在栈中存储了指针，该指针指向堆中该尸体的起始地址。当解释器寻找引用值，会首先检索其在栈中的地址，取得地址后从堆中获取实体；

举个例子：

基本类型：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <script>
  7.  
  8. /*var a = 5;
  9. var b = a;
  10. b += 3;
  11. alert(b);  //8
  12. alert(a);  //5
  13. */
  14.  
  15. //对象和函数和数组都是引用的关系
  16. /*var a = [1,2,3];
  17. var b = a;
  18. b.push(4);
  19. alert(b); //1,2,3,4
  20. alert(a); //1,2,3,4*/
  21.  
  22. var a = [1,2,3];
  23. var b = a;
  24. b = [1,2,3,4];
  25.  
  26. alert(b);  //1,2,3,4
  27. alert(a);  //1,2,3
var obj={};
var objcopy=obj;
objcopy.fun=function(){
console.trace();
console.log('obi.fun');
};
obj.fun();//obi.fun同样会执行objcopy添加的fun方法，证明俩人是引用的同样的东东
  1. </script>
  2. </head>
  3.  
  4. <body>
  5. </body>
  6. </html>

浅层拷贝：

  1. function simpleClone(initalObj) {
  2.       var obj = {};
  3.       for ( var i in initalObj) {
  4.         obj[i] = initalObj[i];
  5.       }
  6.       return obj;
  7.     }
  1.  var obj = {
  2.       a: "hello",
  3.       b:{
  4.           a: "world",
  5.           b: 21
  6.         },
  7.       c:["Bob", "Tom", "Jenny"],
  8.       d:function() {
  9.           alert("hello world");
  10.         }
  11.     }
  1. var cloneObj = simpleClone(obj);
  2.     console.log(cloneObj.b);
  3.     console.log(cloneObj.c);
  4.     console.log(cloneObj.d);
  5.  
  6.     cloneObj.b.a = "changed";
  7.     cloneObj.c = [1, 2, 3];
  8.     cloneObj.d = function() { alert("changed"); };
  9.     console.log(obj.b);//浅拷贝 改动一个对象的值，另一个还是会受到影响   浅拷贝其实就是简单的复制第一层，深层的改变依然会受影响
  10.     console.log(obj.c);
  11.     console.log(obj.d);
  1.  

深拷贝：直接上个比较完善的方法，不会出问题的：（递归拷贝）

function deepClone(initalObj, finalObj) {
　　var obj = finalObj || {};
　　for (var i in initalObj) {
　　　　var prop = initalObj[i]; // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
　　　　if(prop === obj) {
　　　　　　continue;
　　　　}
　　　　if (typeof prop === 'object') {
　　　　　　obj[i] = (prop.constructor === Array) ? [] : {};
　　　　　　deepClone(prop, obj[i]);
　　　　} else {
　　　　　　obj[i] = prop;
　　　　}
　　}
　　return obj;
}
var str = {};
var obj = { a: {a: "hello", b: 21} };
deepClone(obj, str);
obj.a=1;
console.log(str.a);//{a: "hello", b: 21} 互不影响
console.log(str.a.a)//hello
console.log(obj);//{a: 1}

使用Object.create()方法，也可以达到深层拷贝

直接使用var newObj = Object.create(oldObj)，可以达到深拷贝的效果。

  1. function deepClone(initalObj, finalObj) {
  2.   var obj = finalObj || {};
  3.   for (var i in initalObj) {
  4.     var prop = initalObj[i];        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
  5.     if(prop === obj) {
  6.       continue;
  7.     }
  8.     if (typeof prop === 'object') {
  9.       obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
  10.     } else {
  11.       obj[i] = prop;
  12.     }
  13.   }
  14.   return obj;
  15. }

js中值的基本类型与引用类型，以及对象引用，对象的浅拷贝与深拷贝的更多相关文章

  1. JS中String类型转换Date类型 并 计算时间差

    JS中String类型转换Date类型 1.比较常用的方法,但繁琐,参考如下:主要使用Date的构造方法:Date(int year , int month , int day)<script& ...

  2. JS中值类型和引用类型

    一.值类型 例子: var a=10; var b=a; a=20; console.log(b); 例子中,将a的值赋给了b,b=10,然后改变a的值不会影响b的值,a和b是独立的两份,互不影响. ...

  3. 判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解

    提醒大家,Object.prototype.toString().call(param)返回的[object class]中class首字母是大写,像JSON这种甚至都是大写,所以,大家判断的时候可以 ...

  4. js中获取当前浏览器类型

    本文为博主原创,转载请注明出处: 在应用POI进行导出时,先应用POI进行数据封装,将数据封装到Excel中,然后在进行download下载操作,从而完成 POI导出操作.由于在download操作时 ...

  5. JS中的 ES6新类型iterable

    1.1 iterable字面意思:可迭代的,可重复的 iterable是ES6标准引入的新的类型.而Array.Map和Set都属于iterable类型 1.2 为什么加入iterable类型? 遍历 ...

  6. js中判断一个对象的类型的种种方法

    javascript中检测对象的类型的运算符有:typeof.constructor.instanceof. typeof:typeof是一个一元运算符,返回结果是一个说明运算数类型的字符串.如:&q ...

  7. C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  8. js对象的浅拷贝与深拷贝

    浅拷贝和深拷贝都是对于JS中的引用类型而言的,浅拷贝就只是复制对象的引用(堆和栈的关系,原始(基本)类型Undefined,Null,Boolean,Number和String是存入堆,直接引用,ob ...

  9. Java对象的浅拷贝和深拷贝&&String类型的赋值

    Java中的数据类型分为基本数据类型和引用数据类型.对于这两种数据类型,在进行赋值操作.方法传参或返回值时,会有值传递和引用(地址)传递的差别. 浅拷贝(Shallow Copy): ①对于数据类型是 ...

随机推荐

  1. 执行start-dfs.sh后，datenode没有启动的解决办法

    执行start-dfs.sh后,datenode没有启动,很大一部分原因是因为在第一次格式化dfs后,启动并使用了hadoop,后来又重新执行了格式化命令(hdfs namenode -format) ...

  2. msyql同步的时候报错 : 错误代码： 1293 Incorrect table definition;there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON UPDATE clause

    场景,两个不同服务器上的数据库,进行数据库同步 但是执行之后,提示报错 错误代码: 1293 Incorrect table definition; there can be only one TIM ...

  3. H3C ER6300 + 两台 H3C S5120 组网举例

    组网需求: 1.H3C ER6300 作出口路由.防火墙及Qos限速等功能(ER6300 配置LAN口 192.168.30.254默认网关) 2.H3C S5120 两台配置相同VLAN10 VLA ...

  4. Solr学习笔记——导入JSON数据

    1.导入JSON数据的方式有两种,一种是在web管理界面中导入,另一种是使用curl命令来导入 curl http://localhost:8983/solr/baikeperson/update/j ...

  5. 8 -- 深入使用Spring -- 5...2 使用@Cacheable执行缓存

    8.5.2 使用@Cacheable执行缓存 @Cacheable可用于修饰类或修饰方法,当使用@Cacheable修饰类时,用于告诉Spring在类级别上进行缓存 ------ 程序调用该类的实例的 ...

  6. Orleans学习总结(六)--应用篇

    上一篇Orleans学习总结(五)--监控篇,我们这篇来说说我们项目的应用   这是我们项目的结构图   我们分别来说下各个部分 1.Zookeeper作为集群基础,至少开5个,分别在不同的物理机上 ...

  7. nginx关闭目录浏览功能

    nginx图片服务器,因为图片的敏感度,不允许直接访问图片的目录: 需要修改配置文件,去掉 autoindex on; 重启nginx即可 location /soft { #autoindex on ...

  8. K - Super A^B mod C

    Given A,B,C, You should quickly calculate the result of A^B mod C. (1<=A,C<=1000000000,1<=B ...

  9. Windows NTFS 符号链接 与 Linux 软连接

    Windows NTFS 符号链接又称“符号链接”==================================== F:\>mklink /d Link_d Target 为 Link ...

  10. 7个简单的Excel技巧，需要的赶紧get起来吧

    1.直观数据图形化 2. Ctrl不连续选择 3. Ctrl+A相连文本框全选 4. 格式刷点击 5. SUM函数求和 6. 自动求和.自动求平均值.自动计数 7. 行.列距调节