1. 作用域

1. 概述

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的 可用性的代码范围 就是这个名字的 作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了命名冲突。

2. 局部作用域

局部作用域（函数作用域），在函数内部就是局部作用域，代码的名字只在函数内部起效果和作用

1
2
3
4
5
6
7
// 此处的代码不能使用 num 变量
function fn() {
  // 局部作用域
  var num = 20;
  console.log(num);
  // 此处的代码可以使用 num 变量
}

3. 全局作用域

函数之外声明的变量，会成为全局变量。

全局变量的作用域是全局的：网页的所有脚本和函数都能够访问它。

1
2
3
4
5
var num = 10;
// 此处的代码可以使用 num 变量
function fn() {
  // 此处的代码也能使用 num 变量
}

2. 变量的作用域

在 JavaScript 中，根据作用域的不同，变量可以分为两种：

  • 全局变量
  • 局部变量

1. 全局变量

在全局作用域下的变量叫做 全局变量（在函数外部定义的变量）

  • 全局变量在代码的任何位置都可以使用
  • 在全局作用域下 var 声明的变量就是全局变量
  • 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）
1
2
3
4
5
6
7
var num = 10; // num 就是一个全局变量
console.log(num);

function fn() {
  console.log(num); // num 变量可以使用
}
fn();

2. 局部变量

在局部作用域下声明的变量叫做 局部变量（在函数内部定义的变量）

  • 局部变量只能在该函数 内部 使用
  • 在函数内部 var 声明的变量是局部变量
  • 函数的 形参 实际上就是局部变量
1
2
3
4
5
6
function fn() {
  var num = 10; // num 就是局部变量，只能在函数内部使用
  num1 = 20; // 在函数内部，没有声明直接赋值的变量也属于全局变量
}
fn();
console.log(num1);

3. 全局变量和局部变量的区别

  • 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
  • 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

3. 作用域链

内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构称为 作用域链

简单理解为：就近原则

  • 只要是代码，就至少有一个作用域
  • 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
  • 根据在内部函数可以访问外部函数变量的机制，用链式查找决定哪些数据能被内部函数访问

4. 预解析

1. 概述

JavaScript 代码的执行是由浏览器中的 JavaScript 解析器来执行的。

JavaScript 解析器执行 JavaScript 代码的时候，分为两个过程：预解析过程和代码执行过程。

2. 过程

把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。先后规则：先提升变量，在提升函数

3. 案例

案例 1：

1
2
3
4
5
6
var num = 10;
fun();
function fun() {
  console.log(num);
  var num = 20;
}

预解析过程：

1
2
3
4
5
6
7
8
9
var num; // 在全局作用域里提升变量
function fun() {
  // 在全局作用域里提升函数
  var num; // 在局部作用域里提升变量
  console.log(num); // num 的值是 undefined
  num = 20; // 在局部作用域里给变量赋值
}
num = 10; // 给变量赋值
fun(); // 调用函数

案例 2：

1
2
3
4
5
6
7
var num = 10;
function fn() {
  console.log(num);
  var num = 20;
  console.log(num);
}
fn();

预解析过程：

1
2
3
4
5
6
7
8
9
var num;
function fn() {
  var num;
  console.log(num); // 输出结果为 undefined
  num = 20;
  console.log(num); // 输出结果为 20
}
num = 10;
fn();

案例 3：

1
2
3
4
5
6
7
8
var a = 18;
f1();
function f1() {
  var b = 9;
  console.log(a);
  console.log(b);
  var a = '123';
}

预解析过程：

1
2
3
4
5
6
7
8
9
10
11
var a;
function f1() {
  var b;
  var a;
  b = 9;
  console.log(a); // 输出结果为 undefined
  console.log(b); // 输出结果为 9
  a = '123';
}
a = 18;
f1();

案例 4：

1
2
3
4
5
6
7
8
9
10
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
  var a = (b = c = 9);
  console.log(a);
  console.log(b);
  console.log(c);
}

预解析过程：

1
2
3
4
5
6
7
8
9
10
11
12
13
function f1() {
  // var a = b = c = 9;
  // 相当于 var a = 9; b = 9; c = 9;  b 和 c 没有赋值直接声明，当全局变量来看
  var a;
  a = b = c = 9;
  console.log(a); // 输出结果为 9
  console.log(b); // 输出结果为 9
  console.log(c); // 输出结果为 9
}
f1();
console.log(c); // 输出结果为 9
console.log(b); // 输出结果为 9
console.log(a); // 输出结果为 undefined