JS 预解析

xw2327
150 阅读3分钟

预解析

含义：不是教你怎么写代码，而是告诉你写代码的执行机制，和不要怎么写代码
预：预先，在所有代码执行之前
解析：解释，对代码精选通读或解释（只是把整体代码当成一个文档） 比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

这段话不是代码，这就是一堆文档，跟你写Word文档没有任何区别，就算把这段话放到txt文档里，他也只是一段文本，只有当他在浏览器或者对应的解析引擎里的时候它才是代码，否则它就是一段文本，在编辑器里，只有当他运行起来的时候，他就是一段代码了

解释了什么东西

1. var关键字

  • 会把var关键字定义的变量在代码执行之前声明

image.png

这里一共有两个操作

  1. var num
  2. num = 100 当代码在浏览器执行的时候，在所有代码执行之前，会先把声明做好，这就是预解析给我们做的第一件事，也就是说，提前告诉浏览器，我定义了一个num变量存在，你可以使用，只是还没有进行赋值，当代码执行到var num = 100 这一行的时候，才开始赋值
    比如说：

image.png 这段代码没有问题，但是如果把console.log(num)放到声明变量前面的时候

image.png 这个时候告诉浏览器我声明了变量num 所以第一个打印的结果是undefined,接着后面进行赋值，所以第二个打印的结果就是100,但如果我不声明var num = 100这句话的话

image.png 浏览器就会报错

真实的代码执行过程：

  1. var num
  2. console.log(num)
  3. num = 100
  4. console.log(num)

2. 声明式函数

  • 会把这个函数名在所有代码执行之前声明，并且赋值为一个函数 image.png

这个代码能执行出来是因为
带第一句代码执行以前，红色框子这串代码已经通过预解析告诉了浏览器这是一个fn函数，所以能正常执行

真实的代码执行过程:

  1. function fn(){console.log('我是 fn 函数')}
  2. fn()

3.赋值式函数

按照 var 的规则规则进行解析var fn = function(){}

image.png 报错了是因为：
在第一段代码执行的时候，只是有了一个fn,只有方框里的那串代码来到了最前面，所以会报错fn is not a function因为fn是一个undefined它不是function，又要把它当作function来使用，所以会报错。
注意： 声明式函数可以先定义，后定义，而赋值式函数只能后调用

真实的代码执行过程:

  1. var fn
  2. fn()
  3. fn = function(){}
  4. fn()

结论

预解析就是只做这两件事情:

  1. var关键字
  • 会把var关键字定义的变量在代码执行之前声明
  1. 声明式函数
  • 会把这个函数名在所有代码执行之前声明，并且赋值为一个函数
avatar
文章
阅读
粉丝