详解JavaScript栈内存与堆内存


Posted in Javascript onApril 04, 2019

内存分配

在编译阶段,除了声明变量和函数,查找环境中的标识符这两项工作之外,还会进行内存分配。不同类型的数据会分配到不同的内存空间:

  1. 栈内存:引擎执行代码时工作的内存空间,除了引擎,也用来保存基本值和引用类型值的地址。
  2. 堆内存:用来保存一组无序且唯一的引用类型值,可以使用栈中的键名来取得。

示意图:

详解JavaScript栈内存与堆内存

赋值与赋址

引擎不能直接操作堆内存中的数据,这就造成了对同一个变量赋不同类型的值,会出现完全不同的效果:为一个变量赋基本值时,实际上是创建一个新值,然后把该值赋给新变量,可以说这是一种真正意义上的" 赋值 “;为一个变量赋引用值时,实际上是为新变量添加一个指针,指向堆内存中的一个对象,属于一种” 赋址 "操作。

例子:

//基本值
var a = 1;
var b = a;
a = 2;
console.log(a); //输出:2
console.log(b); //输出:1

//引用值
//变量 c 和 d 指向堆中的同一个数组
var c = [0, 1, 2];
var d = c;
c[0] = 5;
console.log(c); //输出:[5, 1, 2]
console.log(d); //输出:[5, 1, 2]

详解JavaScript栈内存与堆内存

浅拷贝

浅拷贝可以简单理解为,发生在栈中的拷贝行为,只能拷贝基本值和引用值的地址。

实现方式

ES6 定义了 Object.assign() 方法来实现浅拷贝。

例子:

let a = {
  name: "Tom",
  obj: {
    age: 19
  }
}
let b = Object.assign({}, a);
console.log(b); //输出:{name: "Tom",obj: {age: 20}}

a.name = "Amy";
a.obj.age = 20;

console.log(a); //输出:{name: "Amy",obj: {age: 20}}
console.log(b); //输出:{name: "Tom",obj: {age: 20}}
数组的 slice() 方法也属于浅拷贝
例子:
var a = [0, [1]];
var b = a.slice(0);
a[0] = 8;
a[1][0] = 9;

console.log(a); //输出:[8, [9]]
console.log(b); //输出:[0, [9]]

*concat() 方法也属于浅拷贝,这里不再叙述。

深拷贝

深拷贝可以简单理解为,同时发生在栈中和堆中的拷贝行为,除了拷贝基本值和引用值的地址之外,地址指向的堆中的对象也会发生拷贝。

实现方式

将需要深拷贝的对象序列化为一个 JSON 字符串,然后根据这个字符串解析出一个结构和值完全一样的新对象,可以间接实现深拷贝。

例子:

let a = {
  name: "Tom",
  obj: {
    age: 19
  }
}
var b = JSON.parse(JSON.stringify(a));
console.log(b); //输出:{name: "Tom",obj: {age: 19}}

a.name = "Amy";
a.obj.age = 20;

console.log(a); //输出:{name: "Amy",obj: {age: 20}}
console.log(b); //输出:{name: "Tom",obj: {age: 19}}

*这种方法需要保证对象是安全的,例如属性值不能是 undefined、symbol、函数、日期和正则。

使用 $.extend() 方法实现深拷贝

$.extend() 方法并非原生 JavaScript 提供的方法,属于 jquery 的方法。这个方法提供的实现深拷贝的基本思路是:如果是基本值或除了对象或数组之外的引用值,直接赋值;如果是对象或数组就需要进行递归,直到递归到基本值或除了对象或数组之外的引用值为止。

jquery 中 $.extend() 方法的代码片段:

//如果 copy 内容是数组或对象则继续调用 extend 函数
if (deep && copy && (jQuery.isPlainObject(copy) || 
(copyIsArray = jQuery.isArray(copy)))) {
  if (copyIsArray) {
    copyIsArray = false;
    clone = src && jQuery.isArray(src) ? src : [];

  } else {
    clone = src && jQuery.isPlainObject(src) ? src : {};
  }
  target[name] = jQuery.extend(deep, clone, copy);

//如果 copy 内容不是数组或对象则直接赋值
} else if (copy !== undefined) {
  target[name] = copy;
}

参考 $.extend() 方法的思路,我们可以自己探索深拷贝的实现方式:

例子:

//深拷贝函数
function extend(source) {
  var target = Array.isArray(source) ? [] : {};
  for (var key in source) {
    var isObject = Object.prototype.toString.call(source[key]) === "[object Object]";
    if (isObject || Array.isArray(source[key])) {
      //如果是对象或数组,继续调用 extend 函数
      target[key] = extend(source[key]);
    } else {
      //递归到基本值或除了对象或数组之外的引用值,直接赋值
      target[key] = source[key];
    }
  }
  return target;
}

//测试代码
var a = {
  a1: undefined,
  a2: null,
  a3: 123,
  a4: false,
  a5: "Tom",
  a6: Symbol.for("6"),
  obj: {
    s: "book",
    n: 10
  },
  arr: [1, 2, 3, [4]],
  fn: function() {
    console.log(999);
  },
  now: new Date(),
}

var b = extend(a);

a.a5 = "Amy";
console.log(a.a5); //输出:Amy
console.log(b.a5); //输出:Tom

a.obj.s = "pen";
console.log(a.obj.s); //输出:pen
console.log(b.obj.s); //输出:book

a.arr[3][0] = 9999;
console.log(a.arr[3][0]); //输出:9999
console.log(b.arr[3][0]); //输出:4

运行时流程图

结合本课的的内容,JavaScript 的运行时流程图如下:

详解JavaScript栈内存与堆内存

*这张图会根据内容的增加不断进行补充。

以上所述是小编给大家介绍的JavaScript栈内存与堆内存详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
深入理解vue路由的使用
Mar 24 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
jQuery中实现text()的方法
Apr 04 #jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 #jQuery
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 #Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 #Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 #Javascript
JavaScript多种页面刷新方法小结
Apr 04 #Javascript
详解easyui 切换主题皮肤
Apr 04 #Javascript
You might like
PHP生成Flash动画的实现代码
2010/03/12 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
php实例化一个类的具体方法
2019/09/19 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
python 模拟登陆163邮箱
2020/12/15 Python
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
销售自我评价
2013/10/22 职场文书
医学院学生求职简历的自我评价
2013/10/24 职场文书
销售实习自我鉴定
2013/12/07 职场文书
董事长秘书职责
2014/01/31 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
会议邀请函
2015/01/30 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
开业典礼致辞
2015/07/29 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
详解JVM系列之内存模型
2021/06/10 Javascript
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android