本页目录

作用域与作用域链

介绍

ES5 时作用域只有两种：

全局作用域
函数作用域

ES6 新增了2中：

块级作用域
module 作用域

块级作用域

ES5 没有块级作用域，所以变量声明会被提升

JS

var txt = '外层变量';

function fn() {
  console.log(txt);
  if (false) {
	var txt = '内层变量';   // var 声明会被提升
  }
}

fn();   // undefined

var txt = '外层变量';

function fn() {
  console.log(txt);
  if (false) {
	var txt = '内层变量';   // var 声明会被提升
  }
}

fn();   // undefined

ES6 let、const 声明的变量，会产生块级作用域

JS

let txt = '外层变量';

function fn() {
  console.log(txt);
  if (false) {  // 块级作用域，不管 true 还是 false 结果都一样
	let txt = '内层变量';
  }
}

fn();   // 外层变量

let txt = '外层变量';

function fn() {
  console.log(txt);
  if (false) {  // 块级作用域，不管 true 还是 false 结果都一样
	let txt = '内层变量';
  }
}

fn();   // 外层变量

块级作用域的实现

为了保持原有的 var function 声明提升的兼容，新的 let const class 等声明的全局变量，在编译阶段被放到了词法环境中，以使其脱离与全局对象的关系。（函数内部作用域中 let、const 声明的变量没有被放到词法环境中）

变量的查找方式：从词法环境的作用域栈顶开始向下查找，如果找到了就返回对应值，如果找不到，就继续去变量环境中查找。