网页JavaScript内存结构分析

1、网页内存上限

任何网页都是有内存上限的，当html、js等数据大小超过上限时，浏览器可能会闪退或停止响应等

2、网页的内存结构：堆 + 栈 + 池

• 池：用来存放一般常量，如0-9，a-Z，”Hello”等

• 栈：存放定义的变量和函数，如var str，function func1等

• 堆：存放对象，所有通过new出来的对象都存在堆中

3、网页内存结构图

4、网页内存结构代码解释

var str = "hello world”：    str存放在栈中，"hello world"存放在常量池中，str只是一个引用var str2 = new String("hello world")：    此时堆中开辟了一个对象，str2是对该对象的引用，而该对象是对"hello world"常量的引用，也就是二级引用

5、网页内存结构实例说明

str1 = "hello";str2 = String("hello");str3 = new String("hello");str1 == str2：true    //比较的是前者和后者的值str1 == str2：truestr2 == str3：truestr1 === str2：true  //比较前者和后者的内存地址str1 === str3：falsestr2 === str3：false

6、JS的垃圾回收机制

• 假如str3为一个对象，当str3赋值为其他值的时候，原本的对象自动清除
• 清除原理：垃圾回收器定期巡视堆中所有对象，当发现某对象没人引用时，就清除
• 也就是说，对象清除不是实时的，而是需要等待一些时间的

7、函数闭包

• 函数在调用之前只存在栈中，只要一调用就会在堆中创建一个闭包空间，执行完后就被回收
• 闭包空间中在使用变量时，优先使用闭包空间中的变量，不管是在之前还是之后调用，但是如果赋值语句在调用之后，就会显示undefined
• 如果在闭包空间中没找到，就直接找全局变量，而不是找父函数的变量

8、闭包函数图解

9、闭包函数实例说明

var num1 = 10;var num2 = 20;function func1(){num1 = 5;num2 = 10;var num2;       //此处定义了num2，所以上面对num2的修改是对这个变量的修改}fun1();alert(num1);    //输出5alert(num2);    //输出20

var num1 = 10;var num2 = 20;function func1(){num1 = 5;num2 = 10;func2();var num2;}function func2(){num2 = 30;  //此处修改了num2，闭包中没找到，直接找全局变量，而不是找fun1中的}fun1();alert(num1);    //5alert(num2);    //30

var tmp = new Date();function fun(){    alert(tmp);                   //undefined    if(false) var tmp ="false";   //false，所以赋值语句没有执行    alert(tmp);                   //undefined    if(true) var tmp = "true";    //true，所以tmp变为“true”    alert(tmp);                   //true}fun();//依次输出情况：因为函数中声明了变量tmp，所以使用的都是函数中的变量//undefined -> undefined -> true