JS高级学习历程-4

4 执行环境可以访问什么变量

具体可以访问变量类型：局部变量、参数、函数、外部环境变量

优先级：局部变量 > 函数 > 参数 > 外部环境变量

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>08-执行环境可以访问的变量信息</title>
 6 
 7     <script type="text/javascript">
 8       //变量在当前、内部、深层环境都会起作用
 9 
10       var name="cat";
11       function f1(){
12           var age=5;
13           function f2(){
14               var color="yellow";
15               function f3(){
16                   console.log("f3:"+name+"--"+age+"--"+color);//f3:cat--function age(){}--yellow
17                   function age(){}
18               }
19               f3();
20           }
21           f2();
22       }
23       f1();
24     </script>
25 </head>
26 <body>
27     
28 </body>
29 </html>
08-执行环境可以访问的变量信息

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>09-执行环境可以访问的变量信息</title>
 6 
 7     <script type="text/javascript">
 8       //变量在当前、内部、深层环境都会起作用
 9 
10       var name="cat";
11       function f1(){
12         var age=5;
13         function f2(){
14             var color="yellow";
15             function f3(age){
16                 //“函数优先级”高于“参数”
17                 console.log("f3:"+name+"--"+age+"--"+color);//f3:cat--function age(){}--yellow
18                 function age(){}
19             }
20             f3();
21         }
22         f2();
23       }
24       f1();
25     </script>
26 </head>
27 <body>
28     
29 </body>
30 </html>
09-执行环境可以访问的变量信息

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>10-执行环境可以访问的变量信息</title>
 6 
 7     <script type="text/javascript">
 8       //变量在当前、内部、深层环境都会起作用
 9 
10       var name="cat";
11       function f1(){
12         var age=5;
13         function f2(){
14             var color="yellow";
15             function f3(){
16                 //同名的函数和声明的时候，函数有“预加载”过程
17                 //函数是第一个被放入内存的
18                 //之后同名变量在运行的时候，就会把内存中的同名函数给覆盖
19 
20                 //“局部变量”的优先级高于“函数”
21                 var age=29;
22                 console.log("f3:"+name+"--"+age+"--"+color);//f3:cat--function age(){}--yellow
23                 function age(){}
24                 //age(); //age is not function
25             }
26             f3(40);
27         }
28         f2();
29       }
30       f1();
31     </script>
32 </head>
33 <body>
34     
35 </body>
36 </html>
10-执行环境可以访问的变量信息

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>11-执行环境可以访问的变量信息</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               function f3(age){
15                   //参数 和 局部变量的优先级
16                   //“局部变量” 优先级 “高于参数”
17                   var age=29; //局部变量
18                   console.log("f3:"+name+"--"+age+"--"+color);//f3:cat--29--yellow
19                   function age(){}
20               }
21               f3(40);
22           }
23           f2();
24       }
25       f1();
26     </script>
27 </head>
28 <body>
29     
30 </body>
31 </html>
11-执行环境可以访问的变量信息

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>12-执行环境可以访问的变量信息</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               function f3(age){
15                   //参数 和外部变量的优先级
16                   //“参数”优先级高于“外部变量”
17                   console.log("f3:"+name+"--"+age+"--"+color);//f3:cat--40--yellow
18               }
19               f3(40);
20           }
21           f2();
22       }
23       f1();
24     </script>
25 </head>
26 <body>
27     
28 </body>
29 </html>
12-执行环境可以访问的变量信息

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>13-执行环境可以访问的变量信息</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               function f3(){
15                   console.log("f3:"+name+"--"+age+"--"+color); //f3:cat--5--yellow
16               }
17               f3();
18           }
19           function age(){}
20           f2();
21       }
22       f1();
23     </script>
24 </head>
25 <body>
26     
27 </body>
28 </html>
13-执行环境可以访问的变量信息

 

5 重新认识“全局变量”和“局部变量”

全局变量：变量在当前环境window、内部环境、内部深层环境都起作用的变量。

          在全部环境都起作用(先声明、后使用)

局部变量：是相对概念，也可以理解为全局变量，其在本身环境、内部环境、内部深层环境都会起作用。但是该变量不能被外部环境使用。

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