JavaScript 中对内存的一些了解

简介: 在使用JavaScript进行开发的过程中,了解JavaScript内存机制有助于开发人员能够清晰的认识到自己写的代码在执行的过程中发生过什么,也能够提高项目的代码质量。其实关于内存的文章也有很多,写这篇文章也非"重弹老调",可以说是给自己理解的知识来一个总结,也顺便将知识分享给学习JavaScript的小伙伴们。

在使用JavaScript进行开发的过程中,了解JavaScript内存机制有助于开发人员能够清晰的认识到自己写的代码在执行的过程中发生过什么,也能够提高项目的代码质量。其实关于内存的文章也有很多,写这篇文章也非"重弹老调",可以说是给自己理解的知识来一个总结,也顺便将知识分享给学习JavaScript的小伙伴们。

JavaScript内存是怎么样的?

JavaScript中的变量的存放有有原始值与引用值之分,原始值代表了原始的数据类型,如Undefined,Null,Number,String,Boolean类型的值;而Object,Function,Array等类型的值便是引用值了。

JavaScript中的内存也分为栈内存和堆内存。一般来说,栈内存中存放的是存储对象的地址,而堆内存中存放的是存储对象的具体内容。对于原始类型的值而言,其地址和具体内容都存在与栈内存中;而基于引用类型的值,其地址存在栈内存,其具体内容存在堆内存中。堆内存与栈内存是有区别的,栈内存运行效率比堆内存高,空间相对推内存来说较小,反之则是堆内存的特点。所以将构造简单的原始类型值放在栈内存中,将构造复杂的引用类型值放在堆中而不影响栈的效率。

var str = "Hello World"; // str:"Hello World"存在栈中
var obj = {value:"Hello World"}; // obj存在栈中,{value:"Hello World"}存在堆中,通过栈中的变量名obj(访问地址)访问

内存中的存储对象生命周期是怎么样的呢?

我们来看看MDN中的介绍:

1.当对象将被需要的时候为其分配内存

2.使用已分配的内存(读、写操作)

3.当对象不在被需要的时候,释放存储这个对象的内存

第一步和第二步在所有语言中都是一样的,第三步的操作在JavaScript中不是那么明显。

来看看内存中发生了什么?

var str_a = "a"; // 为str_a分配栈内存:str_a:"a"
var str_b = str_a; // 原始类型直接访问值,so,为str_b新分配栈内存:str_b:"a"

str_b = "b"; // 栈内存中:str_b:"b"。str_b的值为"b",而str_a的值仍然是"a"
// 分隔 str 和 obj -----------------------------------------------------------//
var obj_a = {v:"a"}; // 为obj_a分配栈内存访问地址:obj_a,堆内存中存对象值:{v:"a"};
var obj_b = obj_a; // 为obj_b分配栈内存访问地址:obj_b,引用了堆内存的值{v:"a"}

obj_b.v = "b"; // 通过obj_b访问(修改)堆内存的变量,这时候堆内存中对象值为:{v:"b"},由于obj_a和obj_b引用的是堆内存中同一个对象值,所以这时候打印都是{v:"b"}

obj_b = {v:"c"}; // 因为改的是整个对象,这里会在堆内存中创建一个新的对象值:{v:"c"},而现在的obj_b引用的是这个对象,所以这里打印的obj_a依旧是{v:"b"},而obj_b是{v:"c"}(两者在内存中引用的是不同对象了)。

然后看看这个问题:

var a = {n:1}; 
var b = a; 
a.x = a = {n:2}; 
// a:{n:2} a.x=undefined b:{n:1,x:{n:2}} b.x:{n:2}

具体的解释可以看看某位园友的详细解释,对理解基础知识点还是很有帮助的哦。

从内存角度看函数传值的变化

网上不少文章是关于JavaScript传值/址的解说,根据上面对值的原始类型和引用类型的区分,也能够理解传的是值还是址。原始类型的值传的便是值,引用类型的传的是内存中对象的地址。

从代码看看区别:

var str_a = "Hello World";
function fn_a(arg){
    console.log(arg); // #1 --> Hello World
    arg = "Hai";
    console.log(str_a,arg); // #2 --> Hello World , Hai
};
fn_a(str_a);
// #3 这时候str_a:"Hello World"

从上面#1处可以看出,传入函数fn_a的是str_a的值(这时候和之前案例str_a/str_b的情况一样),并且内存中分配了新的空间来保存函数参数和其值(函数运行后自动释放这部分内存,后面或说回收机制),所以在#2处打印的是2个不同的字符串。也正是因为传值时候对str_a值进行了值的复制,而这又是原始类型的值,所以在#3处的str_a与早先声明的str_a保持一致。

var obj_a = {value:1};
function fn_a(arg){
    arg={value:2};
};
fn_a(obj_a);
// 这时候obj_a还是{value:1}
function fn_b(arg){
    arg.value=3;
};
fn_b(obj_a);
// 这时候obj_a是{value:3}

上面这个问题也可以从内存角度去理解,两个函数都是传址,而这个址引用了obj_a在内存中对应的对象,所以两个函数中的arg起初都是引用和obj_a同一个内存中的对象值,但是在fn_a中重新为arg赋值新的对象(和之前例子中的obj_a/obj_b情况一样),而fn_b中访问的依旧是和obj_a同一个内存对象,所有fn_b修改是成功的。

垃圾回收机制(简单带过)

JavaScript具有自动进行垃圾回收的机制,这便造成了开发人员极大的方便,至少不用太考虑内存释放的问题(有部分还是要考虑的)。

1.函数的变量只在函数执行过程中存在。在函数执行过程中,函数内部的变量将会在内存中被分配一定的空间,当函数执行完毕后,自动将这些变量从内存中释放,以留出空间作其他用处。

2.当内存中某个变量不再被引用,JavaScript也将清理掉这部分内存的分配。如:

var obj = {v:1}; // 内存中存在{v:1}对象,及obj这个引用地址
obj = {value:2}; // 垃圾回收机制自动清理{v:1},并为新的有用到的{value:2}分配空间 

某园友的JavaScript垃圾回收机制文章,介绍的也挺详细。同时这点在《JavaScript高级程序设计》中也有介绍。

内存优化

就全局变量而言,JavaScript不能确定它在后面不能够被用到,所以它会从声明之后就一直存在于内存中,直至手动释放或者关闭页面/浏览器,这就导致了某些不必要的内存消耗。我们可以进行以下的优化。

使用立即执行函数

(function(){
    // 你的代码
})();

或者:

(function(window){
    // 你的代码
})(window);

如果你的某些变量真的需要一直存在 可以通过上面的方法挂载在window下。同样,你也可以传入jQuery进行使用。

手动解除变量的引用

var obj = {a:1,b:2,c:3};
obj = null;

在JavaScript中,闭包是最容易产生内存问题的,我们可以使用回调函数代替闭包来访问内部变量。使用回调的好处就是(针对访问的内部变量是原始类型的值,因为在函数传参的时候传的是值),在执行完后会自动释放其中的变量,不会像闭包一样一直将内部变量存在于内存中(但如果是引用类型,那么这个被引用的对象依旧存在内存中)。

function fn_a(){
    var value = "Hello World";
    return function(){
            return value;
        };
};
var getValue = fn_a();
var v = getValue(); // --> "Hello World"

在上面的代码中,虽然函数已经执行完毕,但是对于函数中变量value的引用还在,所以垃圾回收机制不会将函数中的value清理。
使用回调:

function fn_a(callback){
    var value = "Hello World";
    return callback(value);
};
function fn_b(arg){
    return arg;
};
var v = fn_a(fn_b);

同时声明,并不是说明这样做就一定比闭包好,闭包也有其好处,只是需要我们分清何时何地去使用才是恰当的。

欢迎交流,共同进步~ 

相关文章
|
22天前
|
JavaScript 前端开发
事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。
【6月更文挑战第27天】事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。例如,动态列表可共享一个`click`事件处理器,通过`event.target`识别触发事件的子元素,简化管理和响应动态内容变化。
17 0
|
1天前
|
移动开发 运维 JavaScript
阿里云云效操作报错合集之遇到Node.js的内存溢出问题,该怎么办
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
|
1月前
|
JavaScript 前端开发 算法
【JavaScript】JavaScript 垃圾回收机制深度解析:内存管理的艺术
JavaScript的内存管理和垃圾回收机制涉及栈内存与堆内存、引用计数与标记-清除算法。栈内存存储基本类型和函数调用时的局部变量,而堆内存用于复杂数据类型,如对象和数组。垃圾回收主要通过标记-清除策略,处理不再被引用的对象。现代引擎如V8使用分代收集和增量标记等优化方法,减少停顿并提升性能。开发者应注意避免内存泄漏,如及时解除引用、管理DOM引用和定时器,使用WeakMap和WeakSet等。理解这些原理和最佳实践对于编写高效代码至关重要。
42 5
|
1月前
|
存储 缓存 JavaScript
JavaScript内存泄漏通常发生在对象不再需要时
【6月更文挑战第16天】JavaScript内存泄漏常由闭包引起,当不再需要的对象仍被闭包引用时,垃圾回收机制无法清理。例如,创建返回大型对象引用的闭包函数会导致内存泄漏。避免泄漏需及时解除引用,清除事件监听器,利用WeakMap或WeakSet,以及定期清理缓存。使用性能分析工具监控内存使用也有助于检测和解决问题。
31 8
|
9天前
|
测试技术 API Android开发
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
|
17天前
|
存储 JavaScript 前端开发
面试官:JS中变量定义时内存有什么变化?
面试官:JS中变量定义时内存有什么变化?
14 0
|
17天前
|
自然语言处理 前端开发 JavaScript
前端 JS 经典:闭包与内存泄漏、垃圾回收
前端 JS 经典:闭包与内存泄漏、垃圾回收
15 0
|
18天前
|
存储 JavaScript 前端开发
javascript的栈内存 VS 堆内存(浅拷贝 VS 深拷贝)
javascript的栈内存 VS 堆内存(浅拷贝 VS 深拷贝)
8 0
|
25天前
|
JavaScript 前端开发 算法
JavaScript 使用自动垃圾回收机制来管理内存
JavaScript 使用自动垃圾回收机制来管理内存
14 0
|
1月前
|
Web App开发 JavaScript 前端开发
JS 哪些操作会造成内存泄露
JS 哪些操作会造成内存泄露