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>

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

 

posted @ 2015-05-18 18:44  竹立荷塘  阅读(206)  评论(0)  编辑  收藏  举报