JS-作用域链及作用
【作用域链】
1 什么事作用域链
一个变量，在当前环境可以使用，当前环境的内部环境也可以使用，内部的深层环境...也可以使用，变量在不同环境都可以使用的现象想成了一个链条，称为“作用域链”
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>02-作用域链定义</title>
6 <script type="text/javascript">
7 //当前是wondow环境
8 var name = "tom";
9 var age = 23;
10 //在js里边，函数就对象，允许有嵌套关系
11 function f1(){
12 //内部环境
13 console.log(name);
14 console.log(age);
15 function f2(){
16 //内部“深层环境”
17 console.log(name);
18 console.log(age);
19 function f3(){
20 //内部“深层环境”
21 console.log(name+"--"+age);
22 }
23 f3();
24 }
25 f2();
26 }
27 f1();
28 </script>
29 </head>
30 <body>
31
32 </body>
33 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>03-作用域链定义</title>
6 <script type="text/javascript">
7 //变量在当前环境、内部、深层环境都会起作用
8 var name = "tom";
9
10 function f1(){
11 var addr = "北京";
12 console.log("f1:"+name+"--"+addr);
13 function f2(){
14 //变量在当前环境和内部、深层环境都会起作用
15 var height = "170";
16 console.log("f2:"+name+"--"+height+"--"+addr);
17 function f3(){
18 console.log("f3"+name+"--"+addr+"--"+height);
19 }
20 f3();
21 }
22 f2();
23 }
24 f1();
25 </script>
26 </head>
27 <body>
28
29 </body>
30 </html>
2 作用域链的作用
① 变量的作用域链是的变量的作用域会在当前、内部、深层环境起作用，而不会跑到外部环境。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>04-作用域链定义</title>
6 <script type="text/javascript">
7 //变量在当前环境、内部、深层环境都会起作用
8 // 不会在外部环境起作用
9 var name = "tom";
10
11 function f1(){
12 var addr = "北京";
13 console.log("f1:"+name+"--"+addr);
14 }
15 f1();
16 console.log(addr);//undefined
17 </script>
18 </head>
19 <body>
20
21 </body>
22 </html>
04-作用域链定义
② 作用域链使得变量的访问按照顺序访问
变量必须“先声明、后使用”
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>05-作用域链定义</title>
6
7 <script type="text/javascript">
8 //变量在当前、内部、深层环境都会起作用
9 //变量必须“先声明、后使用”
10 var name="tom";
11 function f1(){
12 f2(); //使用 //undefined
13 var addr="北京";//声明
14 //f2函数的“声明”位置与“调用”没有先后顺序关系
15 //函数有预加载步骤，代码会被第一个放到内存
16 function f2(){
17 console.log("f2:"+name+"--"+addr);
18 }
19 }
20 f1();
21 </script>
22 </head>
23 <body>
24
25 </body>
26 </html>
05-作用域链定义
③ 变量的作用域是变量声明是就决定的，而不是运行时
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>06-作用域链定义</title>
6 <script type="text/javascript">
7 //变量在当前、内部、深层环境都会起作用
8 //变量的作用域是变量声明时候就决定的，而不是运行时
9 var age=23;
10 function f1(){
11 console.log("f1:"+age);
12 }
13
14 function f2(){
15 var age=29;
16 f1();
17 }
18 f2(); //f1:23(√) f1:29(×)
19 </script>
20 </head>
21 <body>
22
23 </body>
24 </html>
06-作用域链定义
3 AO-ActiveObject活动对象
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>07-作用域链定义</title>
6 <script type="text/javascript">
7 //变量在当前、内部、深层环境都会起作用
8
9 var name="cat";
10 function f1(){
11 var age=5;
12 function f2(){
13 var color="yellow";
14 console.log(name+age+color); //ok
15 function f3(){
16 console.log("f3:"+name+"--"+age+"--"+color);
17 }
18 f3();
19 }
20 f2();
21 }
22 f1();
23 </script>
24 </head>
25 <body>
26
27 </body>
28 </html>
07-作用域链定义
时间： 2024-10-12 14:34:38