美文网首页
js基础:(1)js内存空间、深度拷贝

js基础:(1)js内存空间、深度拷贝

作者: 西线风景 | 来源:发表于2017-02-13 16:33 被阅读0次

1 预备知识


1.1 对计算机内存机制有一定的理解,知道堆和栈的概念。


  • (操作系统): 一般由程序员分配释放, 若程序员不释放,程序结束时可能由OS回收,分配方式类似于链表。
    堆则是存放在二级缓存中,生命周期由虚拟机的垃圾回收算法来决定(并不是一旦成为孤儿对象就能被回收)。所以调用这些对象的速度要相对来得低一些。

  • (操作系统):由操作系统自动分配释放 ,存放函数的局部变量的值等。其操作方式类似于数据结构中的栈。
    栈使用的是一级缓存, 他们通常都是被调用时处于存储空间中,调用完毕立即释放。

1.2 对js的数据类型有一定了解。

  • 基本数据类型 Undefined, Null, Boolean, Number和String.
  • 复杂数据类型Object.

基本数据类型例如
var a1=0;
a1作为变量名,0作为变量具体值,在栈中以简单数据段存储。

Object类型

var b=[1,2,3]; var c={ m:12, n:‘w’ };

b、c作为变量名,在栈内存中以简单数据段存储,并存储其对应具体对象内容的地址即指针。

其存储关系如下图所示:

js中数据内存空间示意

2 js拷贝问题

在实际应用中常见的问题出在,需要多处使用对象引用值的时候。如下示例:

let a1,a2,a3; a1=[1,2,3]; a2=a1; a3=a1; a3[1]=0;

虽然只是a3作了修改,但实际上a1,a2,a3的值都将变为[1,0,3]。
此时应使用深拷贝

2.1 浅拷贝-即变量赋值

结合1.2节的例子,

var a1=0; var s=a1; var b=[1,2,3]; var p=b;

基本数据类型和对象引用浅拷贝示意

由上图可以看出,基本数据类型s会在占内存中分配一个空间,存入变量与对应的值。而对象则是在栈中开辟一个空间,复制的是对象的指针,实际对象的内容对应的是同一个。所以一旦改动p,b的数据值也会被改变。

2.2 深拷贝基本实现

思路:递归调用浅拷贝

typeof()函数-判断数据类型

`
typeof(true) //boolean
typeof(1) //number
typeof(1) //string
typeof({}) //object
typeof([]) //object

typeof(null) //object
typeof(function(){}) //function
“str23”.constructor === String
“str23”.constructor .name==="string"
[].constructor === Array
`

深拷贝实现js代码(主要针对数组和对象形式的

function deepCopy(p, c) {     var c = c || ((p.constructor === Array) ? [] : {});    for (var i in p) {       if (typeof p[i] === 'object') {         c[i] = (p[i].constructor === Array) ? [] : {};         deepCopy(p[i], c[i]);       } else {          c[i] = p[i];       }     }     return c;   } var a = [1, 2, 3]; var a2 = { xx: [1, 2, 3], yy: 2 }; var b = []; var c = deepCopy(a2); console.log(deepCopy(a), c); //运行结果[ 1, 2, 3 ] { xx: [ 1, 2, 3 ], yy: 2 }

相关文章

  • js基础:(1)js内存空间、深度拷贝

    1 预备知识 1.1 对计算机内存机制有一定的理解,知道堆和栈的概念。 堆(操作系统): 一般由程序员分配释放, ...

  • js浅拷贝深拷贝

    js浅拷贝,深拷贝的简单实现 基础数据 浅拷贝 深拷贝

  • 手写实现深度拷贝

    手写实现深度拷贝 本文参考:面试题之如何实现一个深拷贝 基础理论 拷贝的基础是赋值,在 js 中,将一个变量赋值给...

  • js 深度拷贝

    深拷贝(deepClone) 对于一个引用类型,如果直接将它赋值给另一个变量,由于这两个引用指向同一个地址,这时改...

  • 📎js深度拷贝

    方法1 定义方法clone 方法1缺点:无法拷贝函数 方法2 使用 JSON.stringify 和 JSON.p...

  • 透彻 js 的浅深拷贝 。

    透彻 js 的浅深拷贝 。 1、栈(stack)和堆(heap) stack为自动分配的内存空间,它由系统自动释放...

  • js的深拷贝与浅拷贝及实现方法

    前提 理解深拷贝和浅拷贝之前,我们先理解下js变量的存储方式。 js变量分为基础类型(Undefined、Null...

  • JS文集的目录

    js基础心法 深浅拷贝(递归)深浅拷贝(首层浅拷贝) js 数据处理 数组对象查找的常见操作数组对象去重的常见操作...

  • JS工具-类型判断和深拷贝

    1. js深拷贝 js深拷贝简单对象的拷贝可以用JSON.stringify() 和 JSON.parse() 实...

  • Js基础知识-手动实现深拷贝

    本文将手动实现引用类型的深拷贝关于值类型与引用类型可阅读下方文章:JS基础类型直通车:Js基础知识-变量类型Js基...

网友评论

      本文标题:js基础:(1)js内存空间、深度拷贝

      本文链接:https://www.haomeiwen.com/subject/pbmzittx.html