《JavaScript高级程序设计》（第4版）阅读笔记（二十）

这篇文章继续分享《高程四》第四章的内容。

 

4.1.4 确定类型
 

前一章提到的 typeof 操作符最适合用来判断一个变量是否为原始类型。更确切地说，它是判断一个变量是否为字符串、数值、布尔值或 undefined 的最好方式。如果值是对象或 null ，那么typeof 返回 "object" 。

let s = "Nicholas";
let b = true;
let i = 22;
let u;
let n = null;
let o = new Object();
console.log(typeof s); // string
console.log(typeof i); // number
console.log(typeof b); // boolean
console.log(typeof u); // undefined
console.log(typeof n); // object
console.log(typeof o); // object

typeof 虽然对原始值很有用，但它对引用值的用处不大。我们通常不关心一个值是不是对象，而是想知道它是什么类型的对象。为了解决这个问题，ECMAScript提供了 instanceof 操作符，语法如下：

result = variable instanceof constructor

如果变量是给定引用类型（由其原型链决定）的实例，则 instanceof 操作符返回 true 。来看下面的例子：

console.log(person instanceof Object); // 变量persion是Object吗？
console.log(colors instanceof Array); // 变量colors是Array吗？
console.log(pattern instanceof RegExp); // 变量pattern是RegExp吗？

按照定义，所有引用值都是 Object 的实例，因此通过instanceof 操作符检测任何引用值和 Object 构造函数都会返回 true 。类似地，如果用 instanceof 检测原始值，则始终会返
回 false ，因为原始值不是对象。

注意 typeof 操作符在用于检测函数时也会返回 "function" 。当在Safari（直到Safari 5）和Chrome（直到Chrome 7）中用于检测正则表达式时，由于实现细节的原因，typeof 也会返回 "function" 。ECMA-262规定，任何实现内部 [[Call]] 方法的对象都应该在 typeof 检测时返回 "function" 。因为上述浏览器中的正则表达式实现了这个方法，所以 typeof 对正则表达式也返回 "function" 。在IE和Firefox中， typeof 对正则表达式返回 "object" 。

 

4.2 执行上下文与作用域

 

执行上下文（以下简称“上下文”）的概念在JavaScript中是颇为重要的。变量或函数的上下文决定了它们可以访问哪些数据，以及它们的行为。每个上下文都有一个关联的变量对象（variable object），而这个上下文中定义的所有变量和函数都存在于这个对象上。虽然无法通过代码访问变量对象，但后台处理数据会用到它。

全局上下文是最外层的上下文。根据ECMAScript实现的宿主环境，表示全局上下文的对象可能不一样。在浏览器中，全局上下文就是我们常说的 window 对象，因此所有通过var 定义的全局变量和函数都会成为 window 对象的属性和方法。
使用 let 和 const 的顶级声明不会定义在全局上下文中，但在作用域链解析上效果是一样的。上下文在其所有代码都执行完毕后会被销毁，包括定义在它上面的所有变量和函数（全局上下文在应用程序退出前才会被销毁，比如关闭网页或退出浏览器）。

每个函数调用都有自己的上下文。当代码执行流进入函数时，函数的上下文被推到一个上下文栈上。在函数执行完之后，上下文栈会弹出该函数上下文，将控制权返还给之前的执行上下文。ECMAScript程序的执行流就是通过这个上下文栈进行控制的。

上下文中的代码在执行的时候，会创建变量对象的一个作用域链（scope chain）。这个作用域链决定了各级上下文中的代码在访问变量和函数时的顺序。代码正在执行的上下文的变量对象始终位于作用域链的最前端。如果上下文是函数上下文，则其活动对象（activation object）用作变量对象。活动对象最初只有一个定义变量：arguments 。（全局上下文中没有这个变量。）作用域链中的下一个变量对象来自包含上下文，再下一个对象来自再下一个包含上下文。以此类推直至全局上下文；全局上下文的变量对象始终是作用域链的最后一个变量对象。

代码执行时的标识符解析是通过沿作用域链逐级搜索标识符名称完成的。搜索过程始终从作用域链的最前端开始，然后逐级往后，直到找到标识符。（如果没有找到标识符，那么通常会报错。）（也就是说，查找一个变量，遵循的是“就近原则”）

看一看下面这个例子：

var color = "blue";
function changeColor() {
  if (color === "blue") {
    color = "red";
  } else {
    color = "blue";
  }
} 
changeColor();

对这个例子而言，函数 changeColor() 的作用域链包含两个对象：一个是它自己的变量对象（就是定义 arguments 对象的那个），另一个是全局上下文的变量对象。这个函数内部之所以能够访问变量 color ，就是因为可以在作用域链中找到它。

此外，局部作用域中定义的变量可用于在局部上下文中替换全局变量。看一看下面这个例子：

var color = "blue";
function changeColor() {
  let anotherColor = "red";
  function swapColors() {
    let tempColor = anotherColor;
    anotherColor = color;
    color = tempColor;
    // 这里可以访问color、anotherColor和tempColor
  }
 // 这里可以访问color和anotherColor，但访问不到tempColor
 swapColors();
} 
// 这里只能访问color
changeColor();

以上代码涉及3个上下文：全局上下文、 changeColor() 的局部上下文和 swapColors() 的局部上下文。全局上下文中有一个变量 color 和一个函数 chageColor() 。 changeColor() 的局部上下文中有一个变量 anotherColor 和一个函数swapColors() ，但在这里可以访问全局上下文中的变量color 。 swapColors() 的局部上下文中有一个变量tempColor ，只能在这个上下文中访问到。全局上下文和changeColor() 的局部上下文都无法访问到 tempColor 。而在swapColors() 中则可以访问另外两个上下文中的变量，因为它们都是父上下文。

内部上下文可以通过作用域链访问外部上下文中的一切，但外部上下文无法访问内部上下文中的任何东西。上下文之间的连接是线性的、有序的。每个上下文都可以到上一级上下文中去搜索变量和函数，但任何上下文都不能到下一级上下文中去搜索。 swapColors() 局部上下文的作用域链中有3个对象： swapColors() 的变量对象、 changeColor() 的变量对象和全局变量对象。 swapColors() 的局部上下文首先从自己的变量对象开始搜索变量和函数，搜不到就去搜索上一级变量对象。changeColor() 上下文的作用域链中只有2个对象：它自己的变量对象和全局变量对象。因此，它不能访问 swapColors() 的上下文。

注意 函数参数被认为是当前上下文中的变量，因此也跟上下文中的其他变量遵循相同的访问规则

 

4.2.1 作用域链增强

 

虽然执行上下文主要有全局上下文和函数上下文两种（ eval()调用内部存在第三种上下文），但有其他方式来增强作用域链。某些语句会导致在作用域链前端临时添加一个上下文，这个上下文在代码执行后会被删除。

通常在两种情况下会出现这个现象，即代码执行到下面任意一种情况时：① try / catch 语句的 catch 块  ② with 语句

这两种情况下，都会在作用域链前端添加一个变量对象。对with 语句来说，会向作用域链前端添加指定的对象；对 catch 语句而言，则会创建一个新的变量对象，这个变量对象会包含要抛出的错误对象的声明。

这两种情况下，都会在作用域链前端添加一个变量对象。对with 语句来说，会向作用域链前端添加指定的对象；对 catch 语句而言，则会创建一个新的变量对象，这个变量对象会包含要抛出的错误对象的声明。

看下面的例子：

function buildUrl() {
  let qs = "?debug=true";
  with(location){
    let url = href + qs;
  } 
  return url;
}

这里， with 语句将 location 对象作为上下文，因此location 会被添加到作用域链前端。 buildUrl() 函数中定义了一个变量 qs 。当 with 语句中的代码引用变量 href 时，实际上引用的是 location.href ，也就是自己变量对象的属性。在引用qs 时，引用的则是定义在 buildUrl() 中的那个变量，它定义在函数上下文的变量对象上。而在 with 语句中使用 var 声明的变量url 会成为函数上下文的一部分，可以作为函数的值被返回；但像这里使用 let 声明的变量 url ，因为被限制在块级作用域，所以在 with 块之外没有定义。(这个代码执行后有报错，说url变量未定义）

注意 IE的实现在IE8之前是有偏差的，即它们会将 catch 语句中捕获的错误添加到执行上下文的变量对象上，而不是 catch 语句的变量对象上，导致在 catch 块外部都可以访问到错误。IE9纠正了这个问题。