详解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 相关文章推荐
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
vue路由跳转传参数的方法
May 06 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 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的特殊设置
2006/10/09 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
Python threading多线程编程实例
2014/09/18 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python判断telnet通不通的实例
2019/01/26 Python
Python logging设置和logger解析
2019/08/28 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
GWT都有什么特性
2016/12/02 面试题
制药工程专业应届生求职信
2013/09/24 职场文书
计算机专业学生求职信分享
2013/12/15 职场文书
护士在校生自荐信
2014/02/01 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
酒店员工培训方案
2014/06/02 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
社会工作专业自荐信
2014/09/26 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
职代会闭幕词
2015/01/28 职场文书
停水通知
2015/04/16 职场文书
高中化学教学反思
2016/02/22 职场文书