浏览器在执行 JS 代码的时候会分成两部分操作：预解析以及逐行执行代码, 也就是说浏览器不会直接执行代码, 而是加工处理之后再执行, 这个加工处理的过程, 我们就称之为预解析。
预解析规则
- 将变量声明和函数声明提升到当前作用域最前面
- 将剩余代码按照书写顺序依次放到后面
????注意点：通过 let 定义的变量不会被提升 (不会被预解析)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
// 预解析之前
console.log(num); // undefined
var num = 123;
// 预解析之后
var num;
console.log(num);
num = 123;
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
// 不会预解析之前
console.log(num); // 报错
let num = 456;
</script>
</head>
<body>
</body>
</html>
ES6 之前定义函数的格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
console.log(say);
say();
// ES6之前的这种定义函数的格式, 是会被预解析的, 所以可以提前调用
function say() {
console.log("hello BNTang");
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
// 预解析之后的代码
function say() {
console.log("hello BNTang");
}
say();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
console.log(say);
say(); // say is not a function
// 如果将函数赋值给一个var定义的变量, 那么函数不会被预解析, 只有变量会被预解析
var say = function () {
console.log("hello BNTang");
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
var say; // undefined
say();
say = function () {
console.log("hello BNTang");
}
</script>
</head>
<body>
</body>
</html>
ES6 定义函数的格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
say(); // say is not defined
let say = () => {
console.log("hello BNTang");
}
</script>
</head>
<body>
</body>
</html>