js变量声明底层原理分析

前言

先看下面三类案例:     

                                                                             

                                                       

                                                             

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

底层原理

         

  • 上图是计算机底层存储数据的数据结构.堆主要存储普通的变量,容量比较小.栈存储引用型变量,空间很大.比如对象,数组,函数.
  • js遵循变量先声明后使用的原则.比如两行代码  alert(a);var a; 它会先在堆里面声明var a.再执行alert(a)结果弹出undefind.
  • alert(a);var a = 3; 为什么这句代码弹出的也是undefind?照理先声明var a.弹出undefind.然后再给a赋值3.
扫描二维码关注公众号,回复: 12822030 查看本文章

代码分析

1.

                                                                    

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

2.

                                                    

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

3.

                                                              

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

猜你喜欢

转载自blog.csdn.net/brokenkay/article/details/107243640