作用域

1. 全局作用域：全局作用域是最外围的作用域，根据 ECMAScript 的定义，全局作用域在网页中任何地方都能访问到。

2. 函数作用域：函数作用域是在函数内部声明的变量只能在函数内部访问。

3. 块级作用域：块级作用域是在代码块内部声明的变量只能在该代码块内部访问。

全局作用域

全局作用域是最外围的作用域，根据 ECMAScript 的定义，全局作用域在网页中任何地方都能访问到。

var a = 1;
console.log(a); // 1

函数作用域

函数作用域是在函数内部声明的变量只能在函数内部访问。

function foo() {
  var a = 1;
  console.log(a); // 1
}

foo();
console.log(a); // Uncaught ReferenceError: a is not defined

块级作用域

块级作用域是在代码块内部声明的变量只能在该代码块内部访问。

console.log(a); // undefined，变量提升

if (true) {
  var a = 1;
  console.log(a); // 1

  let b = 2;
  console.log(b); // 2
}

console.log(a); // 1
console.log(b); // Uncaught ReferenceError: b is not defined

// var情况下
function foo() {
  var c = 1;
  if (true) {
    var c = 3; // 函数作用域
    console.log(c); // 3
  }
  console.log(c); // 3
}

// let情况下
function foo() {
  let c = 1;
  if (true) {
    let c = 3; // 块级作用域
    console.log(c); // 3
  }
  console.log(c); // 1
}

作用域链

作用域链是一个指向变量对象的指针列表，它保证了变量的有序访问。内部可以访问外部的变量，但是外部不能访问内部的变量。

注意：如果内部变量和外部变量同名，内部变量会覆盖外部变量。

var a = 1;

function foo() {
  var b = 2;

  function bar() {
    var c = 3;
    console.log(a); // 1
    console.log(b); // 2
    console.log(c); // 3
  }

  bar();
}

foo();

优先级

声明变量 > 声明普通函数 > 参数 > 变量提升

function foo() {
  // var a = 1; // 声明a变量
  
  console.log(a); // ƒ a() {}，如果前面有声明a变量，则输出声明变量的值
  
  var a = 2; // 变量提升
  
  // 普通声明函数是不看写函数时的位置的，只看函数声明的位置
  function a() {}
}

foo();

注意

注意声明变量时不使用var关键字，会自动提升到全局作用域。

(function () {
  var a = b = 10;

  /*
  * 等价于
  * b = 10; // 全局作用域 
  * var a = b;
  */
})()

console.log(b); // 10

console.log(a); // Uncaught ReferenceError: a is not defined