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. vs2013 error LNK2005 已经在***.obj中定义

    错误解决办法: 方法一: 中文 项目--属性 ---连接器---输入                               附加依赖项    空格Nafxcwd.lib Libcmtd.lib ...

  2. React Native 项目整合 CodePush 全然指南

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/y4x5M0nivSrJaY3X92c/article/details/81976844 作者 | 钱 ...

  3. R语言reads.table 自动将字符串变成了逻辑值

    今天遇到了一个问题,文件中有一列的值为全为F, 用read.table 读取的时候,自动将F 变成了false 对于这样的转换,可以通过 colClass 参数控制 colClass 参数指定每一列的 ...

  4. Spark学习笔记——读写Hbase

    1.首先在Hbase中建立一张表,名字为student 参考 Hbase学习笔记——基本CRUD操作 一个cell的值,取决于Row,Column family,Column Qualifier和Ti ...

  5. python中,如何将字符串转换为数字(将数字转换为整型),字符串的10转换为整型的10,10.5转换为10

    说明: 在实际的应用过程中,有的时候可能会遇到字符串的10,需要将字符串的10转换为数字的10 在此记录下,通过int函数转换的过程. 操作过程: 1.将字符串转换为整型的10 >>> ...

  6. java 多线程并发 synchronized 同步机制及方式

    2. 锁机制 3. 并发 Excutor框架 4. 并发性与多线程介绍 1. synchronized  参考1. synchronized 分两种方式进行线程的同步:同步块.同步方法 1. 方法同步 ...

  7. python-docx 设置标题heading的中文字体类型+设置正文的中文字体类型

    依赖包: from docx import Document from docx.shared import Pt from docx.shared import Inches from docx.o ...

  8. js - 常用功能方法汇总(updating...)

    一.查值的类型(可用于拷贝) /* * @Author: guojufeng@ * @Date: 2017-12-20 15:07:06 * @purpose 获取一个值的类型 * @param {v ...

  9. Oracle数据库入门——体系结构

    1.oracle内存由SGA+PGA所构成 2.oracle数据库体系结构数据库的体系结构是指数据库的组成.工作过程与原理,以及数据在数据库中的组织与管理机制. oracle工作原理: 1).在数据库 ...

  10. Analytics.js简介

    analytics.js JavaScript代码段是一种可用于衡量用户与您网站的互动情况的全新方式.它与之前的跟踪代码ga.js类似,但为开发者自定义实现方案提供了更大的灵活性. analytics ...