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 作用域链的作用
① 变量的作用域链是的变量的作用域会在当前、内部、深层环境起作用,而不会跑到外部环境。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
② 作用域链使得变量的访问按照顺序访问
变量必须“先声明、后使用”
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
③ 变量的作用域是变量声明是就决定的,而不是运行时
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
3 AO-ActiveObject活动对象
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>