<!DOCTYPE html>
<html>
<head>
<title>js开始学习</title>
<script>
//js引擎运行js 分为两步： 预解析 代码执行
//预解析 js引擎会把js里面所有的var还有function提升到当前作用域的最前面
// 代码执行 按照代书写的顺序从上往下执行
//预解析分为 变量预解析(变量提升)和函数预解析(函数提升)
//变量提升 就是把所有的变量提升到当前的作用域最前面 不提升赋值操作
//变量例子:
console.log(num); //undefined
var num = 10;
fun(); // 报错
var fun = function() {
console.log('6666666');
}
//相当于执行了以下代码
// var fun;
// fun();
// fun = function() {
// console.log('66666666');
// }
//函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用
//函数例子:
function fn() {
console.log('这是正确的，不会出问题');
}
fn();
</script>
</head>
<body>
</body>
</html>
预解析案例
<!DOCTYPE html>
<html>
<head>
<title>js开始学习</title>
<script>
//预解析案例(1)
var num = 100;
fun();
function fun() {
console.log(num);
var num = 99;
}
console.log('-----------------------------');
// 以上的代码是按照下面的顺序执行的
var num;
function fun() {
var num;
console.log(num);
num = 99;
}
num = 100;
fun(); //输出结果是undefined
console.log('-----------------------------1');
//预解析案例(2)
var num = 10;
function f2n() {
console.log(num);
var num = 20;
console.log(num);
}
f2n();
// 以上的代码是按照下面的顺序执行的
var num;
function f2n() {
var num;
console.log(num);
num = 20;
console.log(num);
}
num = 10;
f2n();
//第一个输出结果是undefined
//第二个输出结果是20
console.log('-----------------------------2');
//预解析案例(3)
var a = 18;
f3();
function f3() {
var b = 9;
console.log(a);
console.log(b);
var a = '123';
}
// 以上的代码是按照下面的顺序执行的
var a;
function f3() {
var b;
var a;
b = 9;
console.log(a);
console.log(b);
a = '123';
}
a = 18;
f3();
//a输出结果是undefined
//b输出结果是9
console.log('-----------------------------3');
//预解析案例(4)
// f4();
// console.log(c);
// console.log(b);
// console.log(d);
// function f4() {
// var d = b = c = 9; // 相当于var a=9; b=9; c=9; b和c只进行了赋值并没有声明，因此是全局变量
// console.log(d);
// console.log(b);
// console.log(c);
// }
//输出结果: 直接报错 这种顺序d没有定义
// 以上的代码是按照下面的顺序执行的
function f4() {
var d;
d = b = c = 9;
console.log(d);
console.log(b);
console.log(c);
}
f4();
console.log(c);
console.log(b);
console.log(d);
输出结果: 9, 9, 9, 9, 9, 报错
console.log('-----------------------------4');
</script>
</head>
<body>
</body>
</html>
