1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>变量的声明提前</title>
8 </head>
9 <body>
10 <script>
11
12 /**
13 * 变量的申明提前
14 * - 使用 var 关键字声明的变量，会在所有代码执行前被声明（但不会被赋值）
15 * 但是如果声明变量时不使用 var，则变量不会被提前声明
16 */
17
18 console.log(a)
19 var a = 123; // a 被提前声明， 但未赋值 console.log(a) = undefined
20
21 var b = 456;
22 console.log(b) // b 被提前声明，再逐行执行代码， b被赋值‘456’ console.log(b) = 456
23
24
25 /**
26 * 函数的声明提前
27 * - 使用函数声明形式创建的函数-----function 函数(){}
28 * 它会在所有代码执行前就被创建，所以可以在函数声明前来调用函数
29 * - 使用函数表达式创建的函数，不会被提前声明，不能在声明前调用
30 */
31
32
33 //函数声明，会被提前创建
34 fn1();
35 function fn1 () {
36 console.log('我是fn1函数')
37 }
38
39 //函数表达式，不会提前创建
40 var fn2 = function () { // fn2 变量被提前声明，但未赋值
41 console.log('我是fn2函数')
42 }
43 fn2();
44
45
46 /**
47 * 函数作用域
48 * - 调用函数时创建函数作用域，函数执行完毕后，函数作用域销毁
49 * - 每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的
50 * - 在函数作用域中可以访问到全局作用域的变量
51 * 在全局作用域中无法为访问到函数作用域中的变量
52 * - 当函数作用域操作一个变量时，它会在自身作用域中寻找，有就会直接使用，没有就会向上一级中寻找，直到全局作用域
53 * 访问全局中的变量可以用 Windows对象
54 * - 在函数中不用 var 声明的变量会成为全局变量 影响全局
55 * - 如果函数有形参 a，再在函数中定义变量 a,不会影响到全局中的变量a,会赋值给形参
56 *
57 */
58
59 var c = 1;
60 var d = 1;
61
62 function fn3 () {
63 c = 2;
64 var d = 4;
65 e = 5;
66 }
67 fn3(); // 调用函数
68 console.log(c) // c = 2 ; 没有用 var 声明 c 变量，使全局变量 c 重新赋值为2
69 console.log(d) // c = 1 ; 用 var 声明变量；没用影响到全局变量 d
70 console.log(e) // 函数内没有用 var 关键字声明，e 为全局变量，可以被外部访问到
71
72
73 /**
74 * 定义形参就相当于声明了一各变量
75 */
76
77 f = 111
78 function fn6 (f) {
79 // 相当于声明了一份 var f;
80 alert(f);
81 f = 123; // f 赋值给了形参，不会影响到全局变量f
82 }
83 fn6(); // 为传参，undefined
84 alert(f)
85
86 </script>
87 </body>
88 </html>
浙公网安备 33010602011771号