●预解析 其实就是聊聊 js 代码的编译和执行

　　●js 是一个解释型语言，就是在代码执行之前，先对代码进行通读和解释，然后在执行代码

　　●也就是说，我们的 js 代码在运行的时候，会经历两个环节 解释代码 和 执行代码

　　●JavaScript引擎在对JavaScript代码进行解释执行之前，会对JavaScript代码进行预解析，在预解析阶段，会将以关键字var和function开头的语句块提前进行处理

　　●处理过程：当变量和函数的声明处在作用域比较靠后的位置的时候，变量和函数的声明会被提升到作用域的开头。

　　解释代码和执行代码

　　●因为是在所有代码执行之前进行解释，所以叫做 预解析(预解释)

　　●需要解释的内容有两个

　　○var 关键字

　　■在内存中先声明有一个变量名

　　■会把 var 关键字声明的变量进行提前说明, 但是不进行赋值

　　○声明式函数

　　■在内存中先声明有一个变量名是函数名，并且这个名字代表的内容是一个函数

　　■也就是会把函数名进行提前声明, 并且赋值为一个函数

　　解析var关键字

// 1. 解析 var 关键字
console.log(num)
var num = 100
console.log(num)

 　　　○代码分析：

　　预解析

　　var num

　　告诉浏览器, 我定义了一个叫做 num 的变量, 但是没有赋值

　　代码执行

　　第 1 行代码, 在控制台打印 num 变量的值

　　因为预解析的时候, 已经声明过 num 变量, 只是没有赋值

　　num 变量是存在的

　　打印出来的是 undefined

　　第 2 行代码, num = 100

　　给已经定义好的 num 变量赋值为 100 这个数据

　　第 3 行代码, 在控制台打印 num 变量的值

　　因为第 2 行代码的执行, num 已经被赋值为 100 了

　　此时打印出来的内容是 100

　　解析赋值式函数

　　●赋值式函数会按照 var 关键字的规则进行预解析

fn()
var fn = function() { console.log('fn 函数') }
fn()

 　　○代码分析：

　　预解析

　　var fn

　　告诉浏览器我定义了一个叫做 fn 的变量, 但是没有赋值

　　代码执行

　　第 1 行代码, fn()

　　拿到 fn 变量存储的值当做一个函数来调用一下

　　因为 fn 只是声明了变量, 并没有赋值, 所以 fn 是一个 undefined

　　我们做的事情是, 把 undefined 当做一个函数来调用

　　报错: fn is not a function

　　解析声明式函数

//解析声明式函数
fn()
function fn() { console.log('fn 函数') }
fn()

 　　○代码分析 ：

　　预解析

　　function fn() { console.log('fn 函数') }

　　告诉浏览器, 我定义了一个 fn 变量, 并且 fn 变量保存的内容是一个函数

　　代码执行

　　第 1 行代码, fn()

　　拿到 fn 变量存储的值, 当做一个函数来调用

　　因为预解析阶段 fn 存储的就是一个函数

　　调用没有问题

　　第 3 行代码, fn()

　　拿到 fn 变量存储的值, 当做一个函数来调用

　　因为预解析阶段 fn 存储的就是一个函数

　　调用没有问题

　　预解析优先级

fn()
console.log(num)
function fn() {
    console.log('我是 fn 函数')
}
var num = 100

 　　●经过预解析之后可以变形为

function fn() {
    console.log('我是 fn 函数')
}
var num
fn()
console.log(num)
num = 100

 　　预解析中重名问题

　　1.当你使用 var 定义变量 和 声明式函数 重名的时候, 以 函数为主

　　2.只限于在预解析阶段, 以函数为准

　　案例1

num()
var num = 100
num()
function num() { console.log('我是 num 函数') }
num()

 　　○代码分析 ：

　　预解析

　　var num

　　告诉浏览器我定义了一个叫做 num 的变量, 但是并没有赋值

　　function num() { console.log('我是 num 函数') }

　　告诉浏览器我定义了一个叫做 num 的变量, 并且赋值为一个函数

　　预解析结束阶段, num 变量存在, 并且是一个函数

　　执行代码

　　第 1 行代码, num()

　　拿到 num 的值当做一个函数来调用

　　因为预解析阶段, num 就是一个函数

　　所以正常调用

　　第 2 行代码, num = 100

　　给 num 变量赋值为 100

　　因为 num 本身保存的是一个函数, 现在赋值为 100

　　就把 函数 覆盖了, 一个变量只能保存一个值

　　从此以后, num 就是 100 了

　　第 3 行代码, num()

　　拿到 num 的值当做一个函数来调用

　　因为第 2 行的代码执行, 已经把 num 赋值为 100

　　此时就是把 数字 100 当做一个函数来调用

　　报错: num is not a function

上一篇

synchronized中使用Integer带来的问题

下一篇

快速了解JavaScript函数基础