JS变量分为基本类型和引用类型

  

  

  基本类型数据包括Number, String, Boolean, Null, Undefined五种类型;

  引用数据类型包括Array, Date, RegExp, Function等, 统称为Object类型。

JS变量的存储方式

  基本类型变量存储在内存的栈中,栈内分别存储着变量的标识符和变量的值。

var num1 = 3;
var num2 = 5;

  

  引用类型变量存储在内存的堆中,存储结构如下

var person = {
name: "tom",
age: 16,
sayName: function(){
console.log(this.name);
}
}

   

基本与引用变量的区别

变量的访问方式不同

  从一个变量向另一个变量复制基本类型值和引用类型值时,存在不同

访问方式

基本变量:

  按值访问,即通过对保存在变量中的值进行操作

引用变量:

  按引用访问,即通过变量的引用对变量进行操作,不能直接访问引用变量的内存空间

  从一个变量向另一个变量复制基本类型值和引用类型值时

基本变量的复制

  

var num1 = 3;
var num2 = num1;
console.log(num1 === num2);
num2 = 5;
console.log(num1, num2);

  

  

  num2变量值的改变并不会影响变量num1的值,num2中的3只是num1中的3的一个副本,两者相互独立,互不影响。

  其复制及赋值过程如下图所示:

  

引用变量的复制

var person1 = {
name: "tom"
}
var person2 = person1;
console.log(person1 === person1);
person2.name = "lily";
console.log(person1.name, person2.name);

  person2实际上从person1上复制的是一个指针,然后person1 和 person2同时指向堆内存中一个的对象,改变其中一个变量,就会影响另一个变量。

  其复制与赋值过程如下:

JS深浅拷贝

  JS的深浅拷贝只针对于引用类型值。

浅拷贝

  如上所示引用变量的复制,当一个引用变量复制到另一个变量,新的变量和老的变量互相影响,那么称这个复制为浅拷贝。

深拷贝

  当一个引用变量复制到另一个变量,新的变量和老的变量互不影响,那么称这个复制为深拷贝。

  深浅拷贝的本质区别在于复制的是对象的引用还是对象实例,浅拷贝复制的是对象的引用,深拷贝复制的是对象的实例。

  那么引用类型值是否可以实现深拷贝,答案是肯定的,具体思路如下:

  

  深拷贝代码如下:

function deepClone(obj) {
if(!(typeof obj === 'object' && obj)){
alert('argument error, not a object!!!');
return;
} var rtn_obj = Array.isArray(obj) ? [] : {};
for (var key in obj) {
if(obj.hasOwnProperty(key)) {
if(typeof obj[key] === 'obj' && obj[key]){
rtn_obj[key] = deepClone(obj[key]);
} else {
rtn_obj[key] = obj[key];
}
}
}
return rtn_obj;
} var person = {name: 'tom'};
var _person = deepClone(person);
console.log(person === _person, _person);

JSON对象的stringify和parse

  stringify函数是把一个js对象序列化为一个json字符串

  parse函数是把一个json字符串反序列化为一个js对象

  那么通过函数stringify和parse组合进行的复制是深拷贝还是浅拷贝你呢?看代码

var person = {
name: 'tom',
friends: ['lily', 'marton']
} var person_str = JSON.stringify(person);
var _person = JSON.parse(person_str);
console.log(_person === person, _person);
_person.name = 'zhangsasn';
console.log(person, _person);

  由运行结果可知,通过函数stringify和parse组合进行的复制是深拷贝。

JS--变量及深浅拷贝的更多相关文章

  1. js中的深浅拷贝

    js中的深浅拷贝 js中有深拷贝.浅拷贝一说,所谓的深浅拷贝是针对value类型为引用类型(函数.对象.数组)而言的,大概理解的就是: 浅拷贝: 拷贝出的对象c和原始对象o,c和o在key对应的val ...

  2. 【 js 基础 】 深浅拷贝

    underscore的源码中,有很多地方用到了 Array.prototype.slice() 方法,但是并没有传参,实际上只是为了返回数组的副本,例如 underscore 中 clone 的方法: ...

  3. JS复习之深浅拷贝

    一.复习导论(数据类型相关) 想掌握JS的深浅拷贝,首先来回顾一下JS的数据类型,JS中数据类型分为基本数据类型和引用数据类型. 基本数据类型是指存放在栈中的简单数据段,数据大小确定,内存空间大小可以 ...

  4. js对象的深浅拷贝

    JS数据类型可以分为(ES5,暂时不考虑ES6): 简单数据类型:Number.String.undefined.boolean 复杂数据类型:Object.Array 简单的数据类型,往往是赋值操作 ...

  5. Javascript 中的深浅拷贝

    工作中经常会遇到需要复制 JS 数据的时候,遇到 bug 时实在令人头疼:面试中也经常会被问到如何实现一个数据的深浅拷贝,但是你对其中的原理清晰吗?一起来看一下吧! 为什么会有深浅拷贝 想要更加透彻的 ...

  6. 【 js 基础 】【 源码学习 】 深浅拷贝

    underscore的源码中,有很多地方用到了 Array.prototype.slice() 方法,但是并没有传参,实际上只是为了返回数组的副本,例如 underscore 中 clone 的方法: ...

  7. js 基础数据类型和引用类型 ,深浅拷贝问题,以及内存分配问题

    js 深浅拷贝问题 浅拷贝一般指的是基本类型的复制 深拷贝一般指引用类型的拷贝,把引用类型的值也拷贝出来 举例 h5的sessionStorage只能存放字符串,所以要存储json时就要把json使用 ...

  8. js 深浅拷贝 笔记总结

    一.js 数据类型 javaScritp的数据类型有:数值类型.字符串类型.布尔类型.null.undefined.对象(数组.正则表达式.日期.函数),大致分成两种:基本数据类型和引用数据类型, 其 ...

  9. JS深浅拷贝及其实现

    基本数据类型和引用数据类型 JS数据分为基本数据类型和引用数据类型.基本数据类型的变量存储在栈中,引用数据类型则存储在堆中,引用数据类型的存储地址则保存在栈中. 下面来看一个小例子 // 基本数据类型 ...

  10. python变量存储和深浅拷贝

    python的变量及其存储 在高级语言中,变量是对内存及其地址的抽象.对于python而言,python的一切变量都是对象,变量的存储,采用了引用语义的方式,存储的只是一个变量的值所在的内存地址,而不 ...

随机推荐

  1. python中的过滤fliter

    movie_people = ['sb_alex', 'sb_wupeiqi', 'hello'] def filter_test(array): ret = [] for p in array: i ...

  2. [No000016F]高并发下线程安全的单例模式(最全最经典)

    在所有的设计模式中,单例模式是我们在项目开发中最为常见的设计模式之一,而单例模式有很多种实现方式,你是否都了解呢?高并发下如何保证单例模式的线程安全性呢?如何保证序列化后的单例对象在反序列化后任然是单 ...

  3. 利用Python的collections包下Counter的类统计每个数据出现的个数

    from collections import Counter a = [1, 2, 3, 1, 1, 2] result = Counter(a) print result 输出: {1: 3, 2 ...

  4. shell之awk面试小案例

    [root@chavinking mnt]# cat textfile chavinking 1 2 3 4 5 6 nope 1 2 3 4 5 6 [root@chavinking mnt]# c ...

  5. 写一个表达式检查所给的整数是否它第三个数字(从右向左)是7。示例:1732 -> true。

    在学习C#基础部分(课件来源:http://www.xuepub.com/52.html),遇到这么一个题目,前段时间面试遇到一个"车牌限行的问题",我就在想如何取末尾数值的问题. ...

  6. 结构体地址 字符串地址 数组地址 辨析 字符char是整型 内存地址

    小结: 1.函数传参中,结构体不同数组,结构体是传值,指针和数组是传地址:2.随声明顺序,指针变量的内存地址从低到高,其他从高到低:3.char c[]字符数组,即数组的一种:char *c字符指针, ...

  7. “对外部(局部)变量的访问”是C语言函数指针的最大弱点

    1.“对外部(局部)变量的访问”是C语言函数指针的最大弱点 . #include <stdio.h> #include <stdlib.h> /* 结构体定义 */ struc ...

  8. mysql报错Establishing SSL connection without server's identity verification is not recommended

    使用mysql数据库时报错:Establishing SSL connection without server's identity verification is not recommended ...

  9. 洛谷P3121 审查(黄金)Censoring(Gold) [USACO15FEB] AC自动机

    正解:AC自动机 解题报告: 传送门! 啊我好呆啊其实就挺模板题的,,,只是要一个栈搞一下,,,然后我就不会了,,,是看了题解才get的,,,QAQ 然后写下解法趴QwQ 首先看到多串匹配不难想到AC ...

  10. 基于external version进行乐观锁并发控制

    ?version=1?version=1&version_type=external它们的唯一区别在于,_version,只有当你提供的version与es中的_version一模一样的时候, ...