如何理解js的堆与栈,深浅拷贝的区别?

一、首先

我们要知道js中的变量分为基本数据类型和引用数据类型

基本(原始)数据类型有: number string null undefined boolean es6新加 symbol

引用数据(对象)类型: array object function

1、栈:栈内存中存放的就是基本(原始)数据类型,这些类型在栈内存中有固定的大小,通过值来访问.
2、堆:堆内存中在存放的是引用数据类型,同时,引用数据类型会在栈内存中存一个基本类型的值用来保存对象在堆内存的地址,用于引用这个对象(俗称引用地址).

查询引用数据类型的变量时,会先从栈内存中读取引用地址,然后通过地址再去堆内存中找到该值.

基本数据类型,在当前环境执行结束时销毁,而引用类型只有在引用的它的变量不在时,会被垃圾回收机制回收

二、复制与引用时的区别:

对基本数据类型的复制是深拷贝
对引用数据类型的复制是浅拷贝

(在vue中处理数据时要特殊注意这点,曾经因为这个出现一个很难发现的bug - -。)

图解

基本数据类型:基本数据类型值是保存在栈内存中的简单数据段。访问方式是按值访问。

var a= 1;

如何理解js的堆与栈,深浅拷贝的区别?_第1张图片
操作的是变量实际保存的值。

a = 2;
如何理解js的堆与栈,深浅拷贝的区别?_第2张图片

基本类型变量的复制:从一个变量向另一个变量复制时,会在栈中创建一个新值,然后把值复制到为新变量分配的空间上。

var b= a;

如何理解js的堆与栈,深浅拷贝的区别?_第3张图片
b = 2;

如何理解js的堆与栈,深浅拷贝的区别?_第4张图片
引用数据类型:引用数据类型是指保存在堆内存中的对象。也就是,变量中保存的实际上的只是一个指针,这个指针指向堆内存中的一个位置,该位置保存着对象内容。访问方式是按引用访问。

vara = new Object();

如何理解js的堆与栈,深浅拷贝的区别?_第5张图片
当操作时,需要先从栈中读取内存地址,然后再按指针找到保存在堆内存中的值再操作。

a.name= ‘xz’;

如何理解js的堆与栈,深浅拷贝的区别?_第6张图片
引用类型变量的复制:复制的是存储在栈中的指针,将指针复制到栈中为新变量分配的空间中,而这个指针副本和原指针指向存储在堆中的同一个对象;复制操作结束后,两个变量实际上将引用同一个对象。因此,在使用时,改变其中的一个变量的值,将影响另一个变量。

var b= a;

如何理解js的堆与栈,深浅拷贝的区别?_第7张图片
b.sex =‘boy’;
如何理解js的堆与栈,深浅拷贝的区别?_第8张图片

你可能感兴趣的:(工作,web前端)