JavaScript 面试要点：作用域和闭包

# 作用域

作用域是一套规则，用于确定在何处以及如何查找变量（标识符）。如果查找的目的是对变量进行赋值，会使用 LHS 查询；如果目的是获取变量的值，会使用 RHS 查询。

# 作用域的职能

负责收集并维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则
确定当前执行的代码对这些标识符的访问权限

代码语言：javascript复制

var a = 2022;

变量的赋值操作会执行两个动作：

编译器在当前作用域中声明一个变量（如果之前没有声明过）
在运行时，引擎会在作用域中查找该变量，如果能够找到就会对它赋值

# 作用域嵌套

代码语言：javascript复制

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

在当前的作用域中找不到某个变量时，引擎就会在外层嵌套的作用域中继续查找，直到找到或到达最外层作用域（全局作用域）为止。

# 异常

如果 RHS 查询在所有嵌套的作用域中遍寻不到所需的变量，引擎就会抛出 ReferenceError 异常。

当引擎执行 LHS 查询时，如果在顶层（全局作用域）中也无法找到目标变量，全局作用域中 就会创建一个具有该名称的变量，并将其返还给引擎，前提是程序运行在非“严格模式”下。

在严格模式中 LHS 查询失败时，并不会创建并返回一个全局变量，引擎会抛出同 RHS 查询失败时类似的 ReferenceError 异常。

如果 RHS 查询找到了一个变量，但是尝试对这个变量的值进行不合理的操作，比如试图对一个非函数类型的值进行函数调用，或着引用 null 或 undefined 类型的值中的属性，那么引擎会抛出另外一种类型的异常，叫作 TypeError 。

ReferenceError 同作用域判别失败相关，而 TypeError 则代表作用域判别成功了，但是对结果的操作是非法或不合理的。

# 词法作用域

词法作用域意味着作用域是由书写代码时函数声明的位置来决定的。编译的词法分析阶段基本能够知道全部标识符在哪里以及是如何声明的，从而能够预测在执行过程中如何对它们进行查找。

词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变（大部分情况下是这样的）。

代码语言：javascript复制

function foo(a) {
  var b = a * 2;
  function bar(c) {
    console.log(a, b, c);
  }
  bar(b * 3);
}
foo(2); // 2, 4, 12

作用域气泡由其对应的作用域块代码写在哪里决定，它们是逐级包含的。

作用域气泡的结构和互相之间的位置关系给引擎提供了足够的位置信息，引擎用这些信息来查找标识符的位置。

作用域查找会在找到第一个匹配的标识符时停止。 在多层的嵌套作用域中可以定义同名的标识符，这叫作 “遮蔽效应”（内部的标识符“遮蔽”了外部的标识符）。抛开遮蔽效应，作用域查找始终从运行时所处的最内部作用域开始，逐级向外或者说向上进行，直到遇见第一个匹配的标识符为止。

无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置决定。

可以通过使用 eval() 或者 with 欺骗词法作用域，不过这会带来性能上的损失。

# 函数作用域

函数作用域的含义是指，属于这个函数的全部变量都可以在整个函数的范围内使用及复用（事实上在嵌套的作用域中也可以使用）。

代码语言：javascript复制

// foo() 作用域气泡中包含了标识符 a 、 b 、 c 和 bar
function foo (a) {
  var b = 2;

  function bar () {}

  var c = 3;
}

对函数的传统认知就是先声明一个函数，然后再向里面添加代码。但反过来想也可以带来一些启示：从所写的代码中挑选出一个任意的片段，然后用函数声明对它进行包装，实际上就是把这些代码 “隐藏” 起来了。

有很多原因促成了这种基于作用域的隐藏方法。它们大都是从最小特权原则中引申出来的，也叫最小授权或最小暴露原则。这个原则是指在软件设计中，应该最小限度地暴露必要内容，而将其他内容都“隐藏”起来，比如某个模块或对象的 API 设计。

# 块作用域

块作用域是一个用来对最小授权 原则进行扩展的工具，将代码从在函数中隐藏信息扩展为在块中隐藏信息。

# with

用 with 从对象中创建出的作用域仅在 with 声明中而非外部作用域中有效。

# try / catch

少有人会注意到 JavaScript 的 ES3 规范中规定 try /catch 的 catch 分句会创建一个块作用域，其中声明的变量仅在 catch 内部有效。

代码语言：javascript复制

try {
  undefined(); // 抛出异常
} catch (error) {
  console.log(error);
}
console.log(error); // ReferenceError: error is not found

# let

let 关键字可以将变量绑定到所在的任意作用域中（通常是{ .. }内部）。换句话说，let 为其声明的变量隐式地了所在的块作用域。

代码语言：javascript复制

var foo = true;
if (foo) {
  let bar = foo * 2;
  bar = something(bar);
  console.log(bar);
}
console.log(bar); // ReferenceError

为块作用域显式地创建块，使变量的附属关系变得更加清晰。通常来讲，显式的代码优于隐式或一些精巧但不清晰的代码。

只要声明是有效的，在声明中的任意位置都可以使用 { .. } 括号来为 let 创建一个用于绑定的块。

使用 let 进行的声明不会在块作用域中进行提升。声明的代码被运行之前，声明并不“存在”。

代码语言：javascript复制

{
  console.log(bar); // ReferenceError
  let bar = 2;
}

for 循环头部的 let 不仅将 i 绑定到了 for 循环的块中，事实上它将其重新绑定到了循环的每一个迭代中，确保使用上一个循环迭代结束时的值重新进行赋值。

代码语言：javascript复制

for (let i = 0; i < 10; i  ) {
  console.log(i);
}

# 提升

# 声明在前还是赋值在前

代码语言：javascript复制

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

代码语言：javascript复制

console.log(a); // undefined
var a = 2;

# 编译阶段的工作

引擎会在解释 JavaScript 代码之前首先对其进行编译。编译阶段中的一部分工作就是找到所有的声明，并用合适的作用域将它们关联起来。

包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理。

var a = 2;, JavaScript 会将其看成两个声明：var a; 和 a = 2;。第一个声明是在编译阶段进行的，第二个声明会被留在原地等待执行阶段。

代码语言：javascript复制

// a = 2;
// var a;
// console.log(a);
// 实际执行
var a;
a = 2;
console.log(a);

代码语言：javascript复制

// console.log(a);
// var a = 2;
// 实际执行
var a;
console.log(a);
a = 2;

变量和函数声明从它们在代码中出现的位置被“移动”到了最上面。这个过程就叫作提升。即 先有声明，后有赋值。

只有声明本身会被提升，而赋值或其他运行逻辑会留在原地。如果提升改变了代码执行的顺序，会造成非常严重的破坏。

每个作用域 都会进行提升操作。

函数声明会被提升，但是函数表达式却不会被提升。

代码语言：javascript复制

foo(); // TypeError 相当于 undefined()
var foo = function() {
  console.log('foo');
};

即使是具名的函数表达式，名称标识符在赋值之前也无法在所在作用域中使用

代码语言：javascript复制

foo(); // TypeError
bar(); // ReferenceError
var foo = function bar() {
  console.log('foo');
};

// 实际执行顺序
// var foo;
// foo(); // TypeError
// bar(); // ReferenceError
// foo = function () {
//   var bar = ...self...
//   console.log('foo');
// };

# 函数优先

函数声明和变量声明都会被提升。但是一个值得注意的细节是函数会首先被提升，然后才是变量。

代码语言：javascript复制

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

// 实际执行顺序
// function foo() {
//   console.log(1);
// }
// foo(); // 1
// foo = function() {
//   console.log(2);
// };

一个普通块内部的函数声明通常会被提升到所在作用域的顶部。

代码语言：javascript复制

foo(); // b
var a = true;
if (a) {
  function foo() {
    console.log('a');
  }
} else {
  function foo() {
    console.log('b');
  }
}

# 闭包

当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包。

# 闭包的实质

代码语言：javascript复制

function foo() {
  var a = 2;
  function bar () {
    console.log(a); // 2
  }
  return bar;
}
var baz = foo();
baz(); // 2

无论使用何种方式对函数类型的值进行传递 ，当函数在别处被调用时都可以观察到闭包。

无论通过何种手段将内部函数传递到所在的词法作用域以外，它都会持有对原始定义作用域的引用，无论在何处执行这个函数都会使用闭包。

代码语言：javascript复制

function wait (message) {
  setTimeout(function timer() {
    console.log(message);
  }, 1000);
}

wait('Hello, closure!');

本质上无论何时何地，如果将函数（访问它们各自的词法作用域）当作第一级的值类型并到处传递，你就会看到闭包在这些函数中的应用。在定时器、事件监听器、Ajax请求、跨窗口通信、Web Workers 或者任何其他的异步（或者同步）任务中，只要使用了回调函数，实际上就是在使用闭包！

# 循环和闭包

代码语言：javascript复制

for (var i = 0; i < 5; i  ) {
  setTimeout(function timer() {
    console.log(i);
  }, i * 100);
}
// expected output: 6 6 6 6 6
// 输出显示的是循环结束时 i 的最终值

我们试图假设循环中的每个迭代在运行时都会给自己“捕获”一个 i 的副本。但是根据作用域的工作原理，实际情况是尽管循环中的五个函数是在各个迭代中分别定义的，但是它们都被封闭在一个共享的全局作用域中，因此实际上只有一个 i。

代码语言：javascript复制

for (var i = 0; i < 5; i  ) {
  (function(j) {
    setTimeout(function timer() {
      console.log(j);
    }, j * 100);
  })(i);
}
// expected output: 0 1 2 3 4

在迭代内使用 IIFE 会为每个迭代都生成一个新的作用域，使得延迟函数的回调可以将新的作用域封闭在每个迭代内部，每个迭代中都会含有一个具有正确值的变量供我们访问。

我们使用 IIFE 在每次迭代时都创建一个新的作用域。换句话说，每次迭代我们都需要一个块作用域 。

本质上这是将一个块转换成一个可以被关闭的作用域。

代码语言：javascript复制

for (var i = 0; i < 5; i  ) {
  let j = i;
  setTimeout(function timer() {
    console.log(j);
  }, j * 100);
}

for 循环头部的 let 声明还会有一个特殊的行为。这个行为指出变量在循环过程中不止被声明一次，每次迭代 都会声明。随后的每个迭代都会使用上一个迭代结束时的值来初始化这个变量。

代码语言：javascript复制

for (let i = 0; i < 5; i  ) {
  setTimeout(function timer() {
    console.log(i);
  }, i * 100);
}

# 闭包应用场景

IIFE
模块管理
利用延迟执行，如防抖
设计单例模式
设置私有变量
for 循环获取正确的值

javascript 闭包函数面试作用域

0 人点赞