0.搞清三个概念:预加载与执行期;js变量存储(栈区与堆区);js变量的类型(引用类型(对象)与基本数据类型);
JS在预编译时,对于函数的预加载方面,浏览器仅仅选择编译声明式函数(function Fn())进行预加载,对赋值式函数不予加载(有待考证)
预编译阶段,JS不会对函数内部的变量进行加载,会在执行阶段加载。(假想有待考证)
JS中变量的定义在内存中包括三个部分:
变量标示 (比如上图中的Str,变量标示存储在内存的栈区)
变量值 (比如上面中的Str的值souvenir或者是obj1对象的指向堆区地址,这个值也是存储在栈区)
对象 (比如上图中的对象1或者对象2,对象存储在堆区)
1.变量初始化过程
先预加载,后执行。
预加载(预编译): 挂在变量到栈区中去,不进行赋值。
预编译期JS会对本代码块中的所有声明的变量和函数进行处理(类似与C语言的编译),但需要注意的是此时处理函数的只是声明式函数,而且变量也只是进行了声明但未进行初始化以及赋值。
执行阶段:赋值并执行js语句。
2.js变量存储原理
栈区:存放变量名(变量标识符)和变量值(仅存放基本类型值或者引用对象的地址)
堆区:存放真实对象(被引用对象)的值。
//Demo:请仔细思考其过程
clear();
var obj = {name:"johnny"};
var v = 34;
///////////////
var testObj = obj;//此时:testObj与obj指向堆区同一个被引用对象,二者数据保持同步一致
var testV = v;//此时:testV = 34
testObj.name = "jake";
//////////////
var testObjProperty = obj.name;
//testObjProperty = "jake";
testObjProperty.name = "Mary";
//obj.name = "jake";//未改变
obj.age = 30;
var newObjProperty = obj.teacher;//赋值:空地址
obj.teacher = {"name":"唐建梅"};//testObj与obj增加的属性均同步
testObj.teacher //undefined
3.引用文献
3.1 javascript函数执行前期变量环境初始化过程(https://www.cnblogs.com/huzhiming/archive/2012/12/07/2806849.html)
3.2 JavaScript变量存储浅析(二)(http://www.cnblogs.com/souvenir/p/4969565.html)
3.3 JavaScript变量存储浅析(一)(https://www.cnblogs.com/souvenir/p/4969399.html)
3.4 javascript运行机制之执行顺序详解(http://blog.csdn.net/chen_zw/article/details/18502937)
3.5 浏览器是怎样工作的:渲染引擎,HTML解析(连载二)ued.ctrip.com/blog/how-browsers-work-rendering-engine-html-parsing-series-ii.html