预解析详解

最新推荐文章于 2022-06-16 09:23:24 发布

原创最新推荐文章于 2022-06-16 09:23:24 发布 · 425 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

预解析

解释

1. 在所有代码开始执行之前, 对代码进行通读并解释, 解释完毕以后再开始执行代码

2. 函数调用问题

（1）在函数定义的时候, 被装进 “盒子” 内的代码是不会执行的

（2）在函数调用的时候, 代码才会执行

（3）预解析有两部分

<1>全局预解析: 打开页面的时候, 会对全局代码进行预解析, 但是函数体内的代码不管

<2> 局部预解析: 当你函数调用的时候, 会在函数的私有作用域内进行预解析, 解析完毕执行函数体内的代码

预解析都解释哪些内容:

1. var

2.声明式函数

var 的预解析

1. 向浏览器内存声明, 有一个变量被定义了, 但是没有赋值
   2. 赋值操作是在代码执行阶段才会执行的

分析:

1. 当你使用一个变量的时候

2. 如果报错: xxx is not defined, 说明这个变量没有定义

3. 如果出现 undefined 说明这个变量定义过, 但是没有赋值

预解析 - function

声明式函数会进行预解析
当代码发现声明式函数的时候

（1）会在浏览器内存中声明变量名(函数名), 并且被赋值为一个函数

赋值式函数(函数表达式)

（1）按照 var 的规则执行

预解析的重名问题

1. 当代码中函数名和变量名重名时候

2.以函数为准, 仅仅只是在预解析中

3.不要把函数名和变量名重名

函数内的预解析

预解析教会了我们什么

1. 函数名和变量名不要重名

2. 不管是函数还是变量, 进行先声明后使用

3.在函数内, 不要定义和形参一样的函数名

函数的两个阶段都做了什么

函数定义阶段

1. 在堆内存中开辟一段存储空间

2.把函数体内的代码当做字符串放在开辟出来的存储空间内

把函数名放在栈内存中, 把堆内存中的空间地址赋值给栈内存的变量

函数调用阶段

1. 按照栈内存中变量存储的地址找到函数的存储空间

如果这个空间不是一个函数存储空间, 那么直接报错 xxx is not a function

2. 在调用栈中开辟一段新的函数执行空间

把函数存储空间内的形参, 代码全部复制过来

3.在这个执行空间内, 进行形参的赋值

赋值是在函数调用空间内执行的

4.在这个执行空间内, 进行函数内代码的预解析

对函数体内存储的一段字符串进行通读并解释

5.把函数体内的字符串, 当做 js 代码来执行

(1) 如果是合法的 js 代码, 那么直接执行

(2) 如果不合法, 此时才会报错

6.代码执行完毕以后, 此次开辟的函数执行空间销毁

变量的赋值

把一个变量内存储的数据百分之百的复制一份给到另一个变量

在函数的调用过程中

1. 先形参赋值还是先预解析

2. 结论: 先形参赋值后预解析

(1) 不要在函数内定义和形参一样的函数名

(2) 这样你的形参就没有意义了

记住

this : 不管函数在哪定义, 不管函数怎么定义, 直接去看怎么调用的

变量 : 不管函数怎么调用, 就按照定义位置去逐层查看

面试题1

 var a = b = 10
     a = 20
     b = 20
     console.log(a)
     console.log(b)

预解析:

在浏览器定义了一个叫做 a 的变量

代码执行:

b = 10

（1）涉及到的叫做变量赋值机制

（2）直到全局都没有 b 这个变量, 把 b 定义为全局变量, 在进行赋值

a = b

（1）因为 b = 10 的执行, 导致全局有了 b 变量

（2）把 b 变量保存的值赋值给 a

（3）此时 a 也是 10

…

面试题2

 var a = b
     a = 20
     b = 20
     console.log(a)
     console.log(b)

预解析:

在浏览器定义了一个叫做 a 的变量, 没赋值

代码执行:

a = b,

（1）访问 b 变量的值赋值给 a

（2）涉及变量访问机制, b 没有定义过, 报错

（3） b is not defined