JavaScript-作用域链
🐤注意点: 初学者在研究
"作用域链"的时候最好将 ES6 之前和 ES6 分开研究。
需要明确
- ES6 之前定义变量通过 var
- ES6 之前没有
块级作用域, 只有全局作用域和局部作用域- ES6 之前函数大括号外的都是全局作用域
- ES6 之前函数大括号中的都是局部作用域
ES6 之前的作用域链
- 全局作用域我们又称之为
0级作用域- 定义函数开启的作用域就是 1级 / 2级 / 3级 / ...作用域
- JavaScript 会将这些作用域链接在一起形成一个链条, 这个链条就是作用域链
- 除 0 级作用域以外, 当前作用域级别等于上一级 +1
0 ---> 1 ---> 2 ---> 3 ---> 4
变量在作用域链查找规则
- 先在当前找, 找到就使用当前作用域找到的
- 如果当前作用域中没有找到, 就去上一级作用域中查找
- 以此类推直到 0 级为止, 如果 0 级作用域还没找到, 就报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
// 全局作用域 / 0级作用域
// var num = 123;
function demo() {
// 1级作用域
// var num = 456;
function test() {
// 2级作用域
// var num = 789;
console.log(num);
}
test();
}
demo();
</script>
</head>
<body>
</body>
</html>
如上是 ES6 之前的作用域链，接下来看看 ES6 的作用域链。
需要明确
- ES6 定义变量通过
let- ES6 除了全局作用域、局部作用域以外, 还新增了块级作用域
- ES6 虽然新增了块级作用域, 但是通过 let 定义变量并无差异 (都是局部变量)
ES6 作用域链
- 全局作用域我们又称之为 0 级作用域
- 定义函数或者代码块都会开启的作用域就是 1级 / 2级 / 3级 / ...作用域
- JavaScript 会将这些作用域链接在一起形成一个链条, 这个链条就是作用域链
- 除 0 级作用域以外, 当前作用域级别等于上一级 +1
0 ---> 1 ---> 2 ---> 3 ---> 4
变量在作用域链查找规则
- 先在当前找, 找到就使用当前作用域找到的
- 如果当前作用域中没有找到, 就去上一级作用域中查找
- 以此类推直到 0 级为止, 如果 0 级作用域还没找到, 就报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
// 全局作用域 / 0级作用域
// let num = 123;
{
// 1级作用域
// let num = 456;
function test() {
// 2级作用域
// let num = 789;
console.log(num);
}
test();
}
</script>
</head>
<body>
</body>
</html>
