@
预解析
就是 js 代码的执行过程
什么是预解析
- 预: 在所有 js 代码执行之前
- 解析: 对整篇 js 代码进行通读并解释(浏览器在解析)
1.解析了什么内容(只有两种内容)
- var 声明的变量
var num - 声明式函数(不是赋值式函数)
function fn() {}
2.怎么解析的
-
var 声明的变量
在所有 js 代码执行之前, 先把变量声明好
再开始执行代码 -
声明式函数
在所有 js 代码执行之前, 先把函数名声明好, 并且给这个函数名赋值为一个函数
再开始执行代码
3.var 的预解析
var num = 100
这一行代码包含了两个操作
1. 声明变量 var num
2. 变量赋值 num = 100
在这两个操作里面
声明变量那一步是在 预解析 的时候就完成的
在所有 js 代码开始执行之前, 就已经做好了
变量赋值那一步是在 真正执行代码 的时候才开始做的
var num = 100
console.log(num)
// 在 JS 执行的时候
// 先进行预解析
// var num
// 不在有别的东西可以解析了, 那么开始执行代码
// num = 100
// console.log(num)// 给num赋值为 100 ,就是 100
console.log(num)
var num = 100
console.log(num)
/*
拆解代码的执行过程
console.log(num)
var num = 100
1. 预解析的过程
var num
2. 真正执行 所有的 JS 代码
console.log(num) // 其实就是有这个变量,
但是还没有赋值, 打印结果就是 undefined
num = 100
console.log(num)// 给num赋值为 100 ,打印结果就是 100
*/
4.声明式函数预解析
function fn() {}
解析一下这一行代码
-
预解析的过程
告诉浏览器, fn 是一个可以使用的名字
并且 fn 这个名字是一个函数,给这个函数名赋值为一个函数 -
真正的代码开始执行
fn()
function fn() {
console.log(‘我是 fn 函数‘)
}
/*
代码的执行
fn()
function fn() {
console.log(‘我是 fn 函数‘)
}
1. 预解析
告诉浏览器 fn 这个名字被声明过可以使用
并且 fn 还是一个函数 function fn() { console.log(‘我是 fn 函数‘) }
2. 执行代码
fn()
*/
5.赋值式函数的预解析
赋值式函数不会按照声明式函数的预解析进行
而是按照 var 的预解析规则进行
var fn = function () {}
fn() // fn is not a function
var fn = function () {
console.log(‘我是 fn 函数‘)
}
/*
分析代码执行过程
fn()
var fn = function () {}
1. 进行预解析
var fn
就告诉浏览器这个 fn 被声名过了, 但是并没有给他赋值为一个函数
2. 代码开始执行
fn() // 这行代码执行的时候, fn 还是一个没被赋值的状态, 是个 undefined
fn = function () {}
*/
6.预解析的无节操
- 不管 if 条件是不是成立, 写在 {} 里面的代码都会进行预解析
只是条件不成立的时候, 不会执行 {} 里面的赋值操作
// 预解析的无节操 - 1
console.log(age) // undefined
if (2 < 1) {
var age = 18
}
console.log(age) // undefined
/*
解析代码执行过程
console.log(age) // undefined
if (2 < 1) {
var age = 18
}
console.log(age) // undefined
1. 预解析 - 不管 if 是否成立 age都会进行预解析
var age
2. 代码执行
console.log(age) // 没有进行赋值, 就是 undefined
if (2 < 1) {
age = 18
}
console.log(age) // 因为 if 条件为 false, 所以 {} 里面的代码没有执行
*/
- 当再函数内部的时候, return 后面的代码虽然不会执行
但是会进行预解析
// 预解析的无节操 - 2
function fn() {
console.log(num) // undefined
return
var num = 100
}
fn()
/*
解析代码执行过程
1. 预解析 - 不管 teturn 后面代码会不会执行,num都会进行预解析
fn=function () {
console.log(num)
return
var num = 100
}
var num
2. 代码执行
fn()
console.log(num)
*/