likes
comments
collection
share

JS预解析

作者站长头像
站长
· 阅读数 34

预解析

概念: 预解析不是教你怎么书写代码，而是告诉你代码的运行机制，和不要怎么写代码。

预: 预是预先的意思，在所有的代码执行之前

解析： 解释，对代码精选部分通读或者解释 (只是把整体代码当成一个文档)

例如：

<!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里面，他也只是一段文本只有当他在浏览器或者对应的解析引擎里面的时候它才是代码，例如你书写的这段话在谷歌浏览器运行 在浏览器上就会被谷歌浏览器的内核解析，否则的话这段话它就是一段文本，在编辑器里只有当他运行的时候，它就是一段代码了。

一、var关键字

var关键字 用来声明变量 有两种操作方式 第一种 使用关键字 第二种省略关键字 这里推荐使用关键字 规范书写

声明变量的两种方式  
var num = 100;
num =100;

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

例如：

JS预解析

代码是从上往下执行的，第一个console运行的num是没有值的因为变量没有声明所以在控制塔输出了undefind的，第二个num在console之前使用var关键字声明了num，并且赋值为 100 在控制塔输出了100。

代码真实的执行过程：

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

二、声明式函数

JS预解析

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

三.赋值式函数

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

代码的真实执行过程：

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

总结：

预解析只是做了两个事情：

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

二、声明式函数 会把这个函数名在所有代码执行之前声明，并且赋值为一个函数(function)。