Chap4 变量、作用域与内存

原始值与引用值

• 保存原始值（Undefined、Null、Boolean、Number、String、Symbol）的变量是按值访问的，我们操作的就是存储在变量中的实际值
• 引用值是由多个值构成的对象，保存在内存中，JavaScript不允许直接访问内存位置，在操作对象时，操作的是对该对象的引用

动态属性

• 引用值可以随时添加、修改和删除其属性和方法

复制值

• 通过变量把一个原始值赋值到另一个变量时，原始值会被复制到新变量的位置，两个变量可以独立使用，互不干扰
• 把引用值从一个变量赋给另一个变量时，复制的值实际是一个指针，它指向存储在堆内存中的对象，操作完成后，两个变量实际指向同一个对象，因此一个对象上面的变化会在另一个对象上反映出来

传递参数

• ECMAScript中所有函数的参数都是按值传递的。这意味着函数外的值会被复制到函数内部的参数中，就像从一个变量复制到另一个变量一样。如果是原始值，那么就跟原始值变量的复制一样，如果是引用值，那么就跟引用值变量的复制一样。下面这个例子很好地说明了按值传递而非按引用传递这一点

function setName(obj) {
  obj.name = "Nicholas";
  obj = new Object();
  obj.name = "Greg";
}

let person = new Object();
setName(person);
console.log(person.name);  // "Nicholas"

确定类型

• typeof操作符最适合用来判断一个变量是否为原始类型，它是判断一个变量是否为字符串、数值、布尔值或undefined的最好方式，若值是对象或null，则返回object
• 若变量是给定引用类型的实例，则instanceof操作符返回true

执行上下文与作用域

• 上下文，是执行上下文的简称；变量或函数的上下文决定它可以访问哪些数据，以及他们的行为
• 每个上下文都有一个关联的变量对象，在这个上下文中定义的所有变量和函数都存在于这个对象上
• 全局上下文是最外层的上下文。在浏览器中，全局上下文就是window对象，所有通过var 定义的全局变量和函数都会成为window 对象的属性和方法
• 上下文在其所有代码都执行完毕后会被销毁，包括定义在它上面的所有变量和函数（全局上下文在应用程序退出前才会被销毁，比如关闭网页或退出浏览器）
• 每个函数调用都有自己的上下文。当代码执行流进入函数时，函数的上下文被推到一个上下文栈上。在函数执行完之后，上下文栈会弹出该函数上下文，将控制权返还给之前的执行上下文。
• 代码执行时的标识符解析是通过沿作用域链逐级搜索标识符名称完成的。内部上下文可以通过作用域链访问外部上下文中的一切，但外部上下文无法访问内部上下文中的任何东西。

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();

作用域链加强

• 某些语句会导致在作用域链前端临时添加一个上下文，这个上下文在代码执行后会被删除。通常在两种情况出现，一是 try/catch语句的catch块，二是with语句。
• 对with 语句来说，会向作用域链前端添加指定的对象；对catch 语句而言，则会创建一个新的变量对象，这个变量对象会包含要抛出的错误对象的声明。

function buildUrl() {
  let qs = "?debug=true";

  with(location){
    // 实际引用的是location.href 和 上级作用域的qs
    let url = href + qs;
  }
	// 在with 语句中使用var 声明的变量url会成为函数上下文的一部分，可以作为函数的值被返回；但用let 声明的变量url ，因为被限制在块级作用域（稍后介绍），所以在with块之外没有定义
  return url;
}

变量声明

使用var的函数作用域声明

• 使用var 声明变量时，变量会被自动添加到最接近的上下文，在函数中，最接近的上下文就是函数的局部上下文。在with 语句中，最接近的上下文也是函数上下文。但若变量未经声明就被初始化，那么它会自动被添加到全局上下文
• 未经声明而初始化变量会导致很多潜在问题（不建议）。在严格模式下，未经声明就初始化变量会报错。

function add(num1, num2) {
  sum = num1 + num2;
  return sum;
}

let result = add(10, 20); // 30
console.log(sum);         // 30

• var 声明会被拿到函数或全局作用域的顶部，位于作用域中所有代码之前。这个现象叫作“提升”（hoisting）。提升让同一作用域中的代码不必考虑变量是否已经声明就可以直接使用。

function() {
  console.log(name); // 输出 undefined 而不是 Reference Error
  var name = 'Jake';
}

使用let的块级作用域声明

• ES6新增的let关键字和var相似，但它的作用域是块级的，块级作用域由最近的一对花括号{}界定
• let与var 的另一个不同之处是在同一作用域内不能声明两次。重复的var 声明会被忽略，而重复的let 声明会抛出SyntaxError
• let的行为非常适合在循环中声明迭代变量

使用const的常量声明

• 使用const 声明的变量必须同时初始化为某个值。一经声明，在其生命周期的任何时候都不能再重新赋予新值；const 除了要遵循以上规则，其他方面与let 声明是一样的。
• const 声明只应用到顶级原语或者对象。换句话说，赋值为对象的const 变量不能再被重新赋值为其他引用值，但对象的键则不受限制。
• 如果想让整个对象都不能修改，可以使用Object.freeze() ，这样再给属性赋值时虽然不会报错，但会静默失败

const o1 = {};
o1 = {}; // TypeError: 给常量赋值

const o2 = {};
o2.name = 'Jake';
console.log(o2.name); // 'Jake'

const o3 = Object.freeze({});
o3.name = 'Jake';
console.log(o3.name); // undefined

垃圾回收

• JavaScript是使用垃圾回收的语言，也就是说执行环境负责在代码执行时管理内存，不需要像C和C++语言那样，由开发者跟踪内存使用
• 垃圾回收程序必须跟踪记录哪个变量还会使用，以及哪个变量不会再使用，以便回收内存。
• 两种主要的标记策略：标记清理和引用计数

标记清理

• JavaScript最常用的垃圾回收策略是标记清理 （mark-and-sweep）。
• 当变量进入上下文，比如在函数内部声明一个变量时，这个变量会被加上存在于上下文中的标记。当变量离开上下文时，也会被加上离开上下文的标记。
• 垃圾回收程序运行的时候，会标记内存中存储的所有变量（标记方法有很多种，标记过程的实现并不重要，关键是策略）。然后，它会将所有在上下文中的变量，以及被在上下文中的变量引用的变量的标记去掉。在此之后再被加上标记的变量就是待删除的了，原因是任何在上下文中的变量都访问不到它们了。随后垃圾回收程序做一次内存清理 ，销毁带标记的所有值并收回它们的内存。

引用计数

• 引用计数 （reference counting）：其思路是对每个值都记录它被引用的次数。
• 声明变量并给它赋一个引用值时，这个值的引用数为1。如果同一个值又被赋给另一个变量，那么引用数加1。类似地，如果保存对该值引用的变量被其他值给覆盖了，那么引用数减1。当一个值的引用数为0时，就说明没办法再访问到这个值了，因此可以安全地收回其内存了。垃圾回收程序下次运行的时候就会释放引用数为0的值的内存。
• 引用计数面对循环引用时，会导致回收失败，如let A = new Object(); let B = new Object();A.C = B; B.C=A，A和B都被引用两次，无法回收。而在标记清理方法下，离开作用域则都可马上回收
• 新版的JavaScript引擎不再使用这种算法

性能

• 垃圾回收程序会周期性运行，如果内存中分配了很多变量，则可能造成性能损失，因此垃圾回收的时间调度很重要。尤其是在内存有限的移动设备上，垃圾回收有可能会明显拖慢渲染的速度和帧速率。
• 开发者无法直接控制什么时候开始收集垃圾，但可以间接控制触发垃圾回收的条件。
• 现代垃圾回收程序会基于对JavaScript运行时环境的探测来决定何时运行。探测机制因引擎而异，但基本上都是根据已分配对象的大小和数量来判断的。
  • 如V8团队2016年的一篇博文：“在一次完整的垃圾回收之后，V8的堆增长策略会根据活跃对象的数量外加一些余量来确定何时再次垃圾回收。”

内存管理

• JavaScript运行在一个内存管理与垃圾回收都很特殊的环境。分配给浏览器的内存通常比分配给桌面软件的要少很多，分配给移动浏览器的就更少了。这更多出于安全考虑而不是别的，就是为了避免运行大量JavaScript的网页耗尽系统内存而导致操作系统崩溃。这个内存限制不仅影响变量分配，也影响调用栈以及能够同时在一个线程中执行的语句数量。
• 优化内存占用的最佳手段就是保证在执行代码时只保存必要的数据。如果数据不再必要，那么把它设置为null ，从而释放其引用。这也可以叫作解除引用 。这个建议最适合全局变量和全局对象的属性。
• const 和let 都以块（而非函数）为作用域，所以相比于使用var ，使用这两个新关键字可能会更早地让垃圾回收程序介入，尽早回收应该回收的内存。

内存泄漏

// 意外声明全局变量是最常见但也最容易修复的内存泄漏问题
function setName() {
  name = 'Jake';
}

// 定时器也可能会导致内存泄漏：只要定时器一直运行，回调函数中引用的name就会一直占用内存。垃圾回收程序因而就不会清理外部变量
let name = 'Jake';
setInterval(() => {
  console.log(name);
}, 100);

// 闭包导致内存泄漏：创建了一个内部闭包，只要返回的函数存在就不能清理name ，因为闭包一直引用着它。
let outer = function() {
  let name = 'Jake';
  return function() {
    return name;
  };
};

静态分配与内存池

• 静态分配是优化的一种极端形式。如果你的应用程序被垃圾回收严重地拖了后腿，可以利用它提升性能。但这种情况并不多见。

// 若此函数被频繁调用，则addVector2能避免resultant对象被频繁垃圾回收
function addVector1(a, b) {
  let resultant = new Vector();
  resultant.x = a.x + b.x;
  resultant.y = a.y + b.y;
  return resultant;
}

function addVector2(a, b, resultant) {
  resultant.x = a.x + b.x;
  resultant.y = a.y + b.y;
  return resultant;
}

// 避免垃圾回收的一个策略是使用对象池。在初始化的某一时刻，可以创建一个对象池，用来管理一组可回收的对象。应用程序可以向这个对象池请求一个对象、设置其属性、使用它，然后在操作完成后再把它还给对象池。

let v1 = vectorPool.allocate();
let v2 = vectorPool.allocate();
let v3 = vectorPool.allocate();

v1.x = 10;
v1.y = 5;
v2.x = -3;
v2.y = -6;

addVector(v1, v2, v3);

console.log([v3.x, v3.y]); // [7, -1]

vectorPool.free(v1);
vectorPool.free(v2);
vectorPool.free(v3);

// 初始化数组时预留足够空间，避免触发动态扩容（先删除100空间的数组，创建200空间的）
let vectorList = new Array(100);
let vector = new Vector();
vectorList.push(vector);

小结

• JavaScript变量可以保存两种类型的值：原始值和引用值。原始值可能是以下6种原始数据类型之一：Undefined 、Null 、Boolean 、Number 、String 和Symbol 。原始值和引用值有以下特点。

  • 原始值大小固定，因此保存在栈内存上；引用值是对象，存储在堆内存上。
  • 从一个变量到另一个变量复制原始值会创建该值的第二个副本；从一个变量到另一个变量复制引用值只会复制指针，因此结果是两个变量都指向同一个对象。
  • typeof 操作符可以确定值的原始类型，而instanceof 操作符用于确保值的引用类型。

• 任何变量（不管包含的是原始值还是引用值）都存在于某个执行上下文中（也称为作用域）。这个上下文（作用域）决定了变量的生命周期，以及它们可以访问代码的哪些部分。执行上下文可以总结如下。

  • 执行上下文分全局上下文、函数上下文和块级上下文。
  • 代码执行流每进入一个新上下文，都会创建一个作用域链，用于搜索变量和函数。
  • 函数或块的局部上下文不仅可以访问自己作用域内的变量，而且也可以访问任何包含上下文乃至全局上下文中的变量。
  • 全局上下文只能访问全局上下文中的变量和函数，不能直接访问局部上下文中的任何数据。
  • 变量的执行上下文用于确定什么时候释放内存。

• JavaScript是使用垃圾回收的编程语言，开发者不需要操心内存分配和回收。JavaScript的垃圾回收程序可以总结如下。

  • 离开作用域的值会被自动标记为可回收，然后在垃圾回收期间被删除。
  • 主流的垃圾回收算法是标记清理，即先给当前不使用的值加上标记，再回来回收它们的内存。
  • 引用计数是另一种垃圾回收策略，需要记录值被引用了多少次。JavaScript引擎不再使用这种算法，但某些旧版本的IE仍然会受这种算法的影响，原因是JavaScript会访问非原生JavaScript对象（如DOM元素）。
  • 引用计数在代码中存在循环引用时会出现问题。
  • 解除变量的引用不仅可以消除循环引用，而且对垃圾回收也有帮助。为促进内存回收，全局对象、全局对象的属性和循环引用都应该在不需要时解除引用。