JS高级学习历程-3

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>

JS高级学习历程-3

 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-作用域链定义