3分钟弄清楚javascript的堆栈原理，微信web开发者

本文主要是介绍3分钟弄清楚javascript的堆栈原理，微信web开发者，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

复制后的变量对象

引用数据类型：引用数据类型值指保存在堆内存中的对象。也就是，变量中保存的实际上的只是一个指针，这个指针指向内存中的另一个位置，该位置保存着对象。访问方式是按引用访问。

var a = new Object ();

当操作时，需要先从栈中读取内存地址，然后再延指针找到保存在堆内存中的值再操作。

a. name = ‘renlei’ ;

引用类型变量的复制：当从一个变量向另一个变量复制引用类型的值时，同样也会将存储在变量对象中的值复制一份放到 为新变量分配的空间中。不同的是，这个值的副本实际上是一个指针，而这个指针指向存储在堆中的一 个对象。复制操作结束后，两个变量实际上将引用同一个对象。因此，改变其中一个变量，就会影响另 一个变量；

var b = a;

b.name=“张三”;

b.sex = ‘boy’ ;

深浅拷贝

将一个变量的值赋值给另一个变量，相当于在栈内存中创建了一个新的内存空间，然后从栈中复制值，存储到这个新空间中。对于基本类型，栈中存储的就是它自身的值，所以新内存空间存储的也是一个值。直接改变新变量的值，不会影响到旧变量的值，因为他们值存储的内存空间不同。

// 基本类型复制变量

var a = 10;

var b = a;

b = 20;



a // 10

b // 20

而对于引用类型来说，同样是复制栈中存储的值。但是栈存储的只是其引用地址，其具体的值存储在堆中。变量复制仅复制栈中存储的值，不会复制堆中存储的值，所以新变量在栈中的值是一个地址指针。

// 引用类型复制变量

var a = { age: 27 };

var b = a;

b.age = 29;



a.age == b.age; // 29

可见，变量复制赋值，都属于栈存储拷贝，因此深浅拷贝可以这样区分：

• "浅拷贝：栈存储拷贝"

• "深拷贝：栈堆存储拷贝"

深拷贝会同时开辟新的栈内存，堆内存空间。

// 利用JSON对象方法实现深拷贝

var a = { age: 27 };

var b = JSON.parse(JSON.stringify(a));

b.age = 29;



a.age // 27

b.age // 29

函数传参数是按值传递？按引用传递？

var person = {

 age: 27

};

function foo (person) {

  person.age = 29;

}

foo(person);

person.age // 29;

函数调用时，会对参数赋值。而参数传递过程其实同样是变量复制的过程，所以它是按值传递。var person = person，因为传递参数是对象时，变量复制仅复制的栈存储（浅拷贝），所以修改对象属性会造成外部变量对象的修改。

至此，当我们理清栈、堆数据结构，以及JS中数据类型存取方式。深浅拷贝问题也就通顺了。

内存空间

内存空间管理

JavaScript执行过程中内存分配：

1. 为变量对象分配需要的内存

2. 在分配到的内存中进行读/写操作

3. 不再使用时将其销毁，释放内存

内存管理不善，会出现内存泄露，造成浏览器内存占用过多，页面卡顿等问题。

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

**[CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](

)**

本文已被CodeChina开源项目：【一线大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】收录，自学编程路线及系列技术文章等资源持续更新中…
jMkJiDKv-1631249701437)]

**[CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](

)**

本文已被CodeChina开源项目：【一线大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】收录，自学编程路线及系列技术文章等资源持续更新中…

这篇关于3分钟弄清楚javascript的堆栈原理，微信web开发者的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！