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