js 变量提升与函数提升

规则：

函数的提升优先于变量提升。同名的函数会覆盖同名的函数与变量。同名的变量不会覆盖同名的函数。

示例代码1：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>变量提升与函数提升</title>
</head>
<body>
<script type="text/javascript">
var a = 20;
function fn(){
console.log('fn')
}
function fn(){
console.log('covert fn')
}
function a(){
console.log('cover a')
}
console.log(a);
fn();
var fn = 'I want to cover function name fn.'
console.log(fn)
函数的提升优于变量提升。同名的函数会覆盖函数与变量。
</script>
</body>
</html>

控制台输出

解释：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>变量提升与函数提升</title>
</head>
<body>
<script type="text/javascript">
//真正的执行顺序为：
//函数提升
function fn() {
console.log('fn')
}
//函数提升
function fn() {
console.log('covert fn')
}
//函数提升
function a() {
console.log('cover a')
}
//变量提升
var a = undefined;
//变量提升
var fn = undefined;
a = 20;
console.log(a); //20
            fn(); //covert fn
            fn = 'I want to cover function name fn.';
console.log(fn); //I want to cover function name fn.
</script>
</body>
</html>

示例代码2：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>变量提升与函数提升</title>
</head>
<body>
<script type="text/javascript">
function test() {
console.log(foo)
console.log(bar)
var foo = 'hello'
console.log(foo)
var bar = function() {
return 'world'
}
function foo() {
return 'hello'
}
}
test();
</script>
</body>
</html>

控制台输出：

解释：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>变量提升与函数提升</title>
</head>
<body>
<script type="text/javascript">
//执行顺序为：
function test() {
//函数提升
function foo() {
return 'hello'
}
//变量提升 但是不会覆盖同名的函数
// var foo = undefined;
//变量提升
var bar = undefined;
console.log(foo)
console.log(bar)
foo = 'hello'
console.log(foo)
bar = function() {
return 'world'
}
}
test();
</script>
</body>
</html>