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

举个例子：

基本类型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script>

/*var a = 5;

var b = a;

b += 3;

alert(b);  //8

alert(a);  //5

*/

//对象和函数和数组都是引用的关系

/*var a = [1,2,3];

var b = a;

b.push(4);

alert(b); //1,2,3,4

alert(a); //1,2,3,4*/

var a = [1,2,3];

var b = a;

b = [1,2,3,4];

alert(b);  //1,2,3,4

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方法，证明俩人是引用的同样的东东
</script>

</head>

<body>

</body>

</html>

浅层拷贝：

function simpleClone(initalObj) {

      var obj = {};

      for ( var i in initalObj) {

        obj[i] = initalObj[i];

      }

      return obj;

    }

 var obj = {

      a: "hello",

      b:{

          a: "world",

          b: 21

        },

      c:["Bob", "Tom", "Jenny"],

      d:function() {

          alert("hello world");

        }

    }

var cloneObj = simpleClone(obj);

    console.log(cloneObj.b);

    console.log(cloneObj.c);

    console.log(cloneObj.d);

    cloneObj.b.a = "changed";

    cloneObj.c = [1, 2, 3];

    cloneObj.d = function() { alert("changed"); };

    console.log(obj.b);//浅拷贝 改动一个对象的值，另一个还是会受到影响   浅拷贝其实就是简单的复制第一层，深层的改变依然会受影响

    console.log(obj.c);

    console.log(obj.d);
 

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

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)，可以达到深拷贝的效果。

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) ? [] : Object.create(prop);

    } else {

      obj[i] = prop;

    }

  }

  return obj;

}

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. Java连接各种数据库写法

    # 示例配置参考,涵盖几乎所有的主流数据库 ############# Oracle数据库 ######################## #   数据库驱动名 driver=oracle.jdbc ...

  2. .net core读取json格式的配置文件

    在.Net Framework中,配置文件一般采用的是XML格式的,.NET Framework提供了专门的ConfigurationManager来读取配置文件的内容,.net core中推荐使用j ...

  3. Go指南练习_斐波纳契闭包

    源地址 https://tour.go-zh.org/moretypes/26 一.题目描述 让我们用函数做些好玩的事情. 实现一个 fibonacci 函数,它返回一个函数(闭包),该闭包返回一个斐 ...

  4. Java8学习笔记（四）--接口增强

    增强点 静态方法 public interface InterfacePlus { void run(); static Date createDate(){ return new Date(); } ...

  5. linux下mysql 文件导入导出

    最近在做mysql的数据导入导出得到的一些经验,记录下. 1.首先要开通导入导出的功能,需要设置一个mysql的配置 可以在 my.conf 文件的最后增加配置项 secure-file-priv=' ...

  6. php: Cannot send session cache limiter

    修改php.ini中的session.auto_start = 0 为 session.auto_start = 1 MAC 的php.ini 在 /private/etc/ 目录下修改的时候发现su ...

  7. HTTP 响应状态码

    MDN https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status section 10 of RFC 2616 https://tools.ie ...

  8. VUE----整理

    -------------------------------------------------------------------VUE------------------------------ ...

  9. ELK之使用metricbeat收集系统数据及其他程序并生成可视化图表

    将 Metricbeat 部署到您所有的 Linux.Windows 和 Mac 主机,并将它连接到 Elasticsearch 就大功告成啦:您可以获取系统级的 CPU 使用率.内存.文件系统.磁盘 ...

  10. Saltstack之通过grains在配置文件中赋值

    案例,使用salt给客户端安装zabbix agent时需要在配置文件中自动生成主机名信息 zabbix agent安装sls zabbix-agent-install: file.managed: ...