js变量声明底层原理分析

前言

先看下面三类案例:     

                                                                             

                                                       

                                                             

• 第一张图函数fun定义在后面,应该把var定义的覆盖,可结果显示的却是1不是2
• 第二张图说明fun最终指向的是数组,所以运行fun()会报错
• 第三张图.如果按照图2的逻辑,fun指向的是undefined,运行应该也会报错.可最后却输出了2

底层原理

• 上图是计算机底层存储数据的数据结构.栈主要存储数据的引用地址,容量比较小.堆存储真实的数据,空间很大,比如对象,数组,函数.其实除了变量的引用外,像小整数也会存在栈里.而其他类型的数据包括字符串都是存储在堆里面的.比如字符串var str ="hello world",str是字符串的引用被存储在栈里,而"hello world"这串真实数据是存储在堆里面的.
• js遵循变量先声明后使用的原则.比如两行代码  alert(a);var a; 它会先在栈里面声明var a.再执行alert(a)结果弹出undefind.
• alert(a);var a = 3; 为什么这句代码弹出的也是undefind?同理先声明var a.弹出undefind.然后再给a赋值3.

代码分析

1.

                                                                    

• 上述代码运行会在栈里面创建一个var fun指向一个函数.在堆里面也会创建一个函数 fun function(){...}
• 上述声明工作做完了,现在该执行代码了.当执行到fun()时,程序会先去栈里面找,发现找到了就执行了栈里面定义的var fun所指向的函数
• 它为什么会先去栈里面找呢?因为栈的体积小,而堆的容量大.先找栈速度会快一些,这就是输出1的原因

2.

                                                    

• 同理先去栈里面找fun,在栈里找到了,发现fun指向的是一个数组,所以执行fun()就会报错

3.

                                                              

• 同理先去栈里面找,虽然找到了var fun,但是发现它没有被赋值.此时计算机就会去堆里面找fun,最终执行的是堆里的函数
• 值得注意如果上图第一行代码是 var fun = "";  即使fun等于空字符串,它仍然是被赋予值的,最后fun指向这个空字符串