函数表达式和函数声明的区别

       函数表达式和函数声明的区别

       JavaScript有一个特性叫做“声明提前”,即在函数内声明的变量(不涉及初始化)都会提前到
函数体顶部,如下结果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="helloW.js"></script>
<script type="text/javascript">
var a = 1;
function test1(){
console.log(a);//undefined,声明提前,默认先初始化为undefined
var a = 2;
console.log(a);//2
}
</script>
</head>
<body>
<span onclick="test1()">点击</span>
</body>
</html>



       在偶然情况下发现某种程度上function也可以看作var来理解。
function声明的函数也有“声明提前”这一特性,但是对于函数表达式来说就没有这一特性,具体如下:
函数声明:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="helloW.js"></script>
<script type="text/javascript">
window.onload=function () {
console.log(func());//2
function func(){
var c = 1;
var d = 1;
return c + d;
}
console.log(func());//2
};
</script>
</head>
<body>
</body>
</html>

函数表达式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="helloW.js"></script>
<script type="text/javascript">
window.onload=function () {
console.log(func());//IE浏览器控制台报错:SCRIPT5007: 缺少对象 。因为有立即执行,但是func()
未被定义,所以报错。后加括号表示立即执行。
//console.log(func);//undefined,此时输出undefined,是因为var声明的func变量声明被提前了。
var func = function(){
var c = 1;
var d = 1;
return c + d;
}
console.log(func());//2
console.log(func);/*function test(){
var c = 1;
var d = 1;
return c + d;
} */
};
</head>
<body>
</body>
</html>

       效果可以直接创建个文本文件复制上边的代码运行比对。

假如帮助到了你,麻烦点个赞,谢谢了。
文章目录