JavaScript初学入门之预解析（案例细讲）

预解析

两个坑

坑1

//undefined

console。log(num);
var num = 10;

相当于以下代码

var num;
console.log(num);
num = 10;

前两步造成了undefined

坑2

//报错

fn();
var fn = function(){
	console.log(22);

相当于以下代码

var fn;
fn();
var fn = function(){
	console.log(22);

函数表达式
调用必须写在函数表达式的下面

案例

案例一

var num = 10;
fun();
function fun(){
    console.log(num);
    var num = 20;
}

相当于执行以下代码

var num;

function fun(){
	var num;
    console.log(num);
    num = 20;
}
num = 10;
fun();

输出结果就是undefined

案例二

var num = 10;

function fn(){
	console.log(num);
	var num = 20;
	console.log(num);
}
fn():

相当于执行以下代码

var num;
function fn(){
	var num;
	console.log(num);
	num = 20;
	console.log(num);
}
num = 10;
fn():

输出结果：前一个num undefined；后一个num 20

案例三

var a = 10;
f1();
function f1(){
	var b = 9;
	console.log(a);
	console.log(b);
	var a = '123';
}

相当于执行以下代码

var a;
function f1(){
	var b;
	var a;
	b = 9;
	console.log(a);
	console.log(b);
	a = '123';
}
a = 10;
f1();

输出结果：a是 undefined；b = 9

案例四

f1();
console.log(c);
console.log(b);
console.log(a);
function f1(){
	var a = b = c = 9;
	console.log(a);
	console.log(b);
	console.log(c);
}

相当于执行以下代码

function f1(){
	var a = b = c = 9;
	//相当于var a = 9;b = 9;c = 9;
	//b 和 c直接赋值，没有var声明，当全局变量看
	console.log(a);
	console.log(b);
	console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);

输出结果：里面abc都是9
外面c和b都是9，a报错