javascript高级程序设计 变量、作用域与内存

2.变量、作用域与内存

2.1 原始值与引用值

原始值（primitive value）就是 最简单的数据，引用值（reference value）则是由多个值构成的对象。

保存原始值的变量是按值（by value）访问的，因为我们操作的就是存储在变量中的实际值。引用值是保存在内存中的对象。

2.1.1 动态属性

对于引用值而言，可以随时添加、修改和删除其属性 和方法。

let person = new Object(); //创建对象
person.name = "Nicholas"; //动态添加name属性
console.log(person.name); // "Nicholas" 

2.1.2 复制值

原始值

let num1 = 5;

let num2 = num1;

这里，num1 包含数值 5。当把 num2 初始化为 num1 时，num2 也会得到数值 5。这个值跟存储在 num1 中的 5 是完全独立的，因为它是那个值的副本。这两个变量可以独立使用，互不干扰。改变num2的值并不会作用与num1

引用值

在把引用值从一个变量赋给另一个变量时，存储在变量中的值也会被复制到新变量所在的位置。区 别在于，这里复制的值实际上是一个指针，它指向存储在堆内存中的对象。操作完成后，两个变量实际 上指向同一个对象，因此一个对象上面的变化会在另一个对象上反映出来。

let obj1 = new Object(); 
let obj2 = obj1; //obj2相当于指向obj1的指针，对obj1和obj2的操作是同样的对象
obj1.name = "Nicholas"; 
console.log(obj2.name); // "Nicholas" 

2.1.3 传递参数

ECMAScript 中所有函数的参数都是按值传递的。如果是原始值，那么就跟原始值变量的复制一样，如果是 引用值，那么就跟引用值变量的复制一样。

在按值传递参数时，值会被复制到一个局部变量。

//传递原始值
function addTen(num) { 
 num += 10; 
 return num; 
} 
let count = 20;
let result = addTen(count); 
console.log(count); // 20，没有变化
console.log(result); // 30

这里，函数 addTen()有一个参数 num，它其实是一个局部变量。在调用时，变量 count 作为参数 传入。count 的值是 20，这个值被复制到参数 num 以便在 addTen()内部使用。在函数内部，参数 num 的值被加上了 10，但这不会影响函数外部的原始变量 count。参数 num 和变量 count 互不干扰，它们 只不过碰巧保存了一样的值。因为是传入的是原始值，count复制给num，num作为局部变量改变，并不影响count的值

//传递引用值
function setName(obj) { 
 obj.name = "Nicholas"; 
 obj = new Object(); //新建一个obj对象
 obj.name = "Greg"; 
} 
let person = new Object(); 
setName(person); 
console.log(person.name); // "Nicholas" 

这个例子前后唯一的变化就是 setName()中多了两行代码，将 obj 重新定义为一个有着不同 name 的新对象。当 person 传入 setName()时，其 name 属性被设置为"Nicholas"。然后变量 obj 被设置 为一个新对象且 name 属性被设置为"Greg"。如果 person 是按引用传递的，那么obj和person实际上是一个内存地址，改变obj实际上是直接操作在内存上的，那么 person 应该自动将 指针改为指向 name 为"Greg"的对象。可是，当我们再次访问 person.name 时，它的值是"Nicholas"， 这表明函数中参数的值改变之后，原始的引用仍然没变。obj实际上只是复制了引用值person的值，obj实际上是指向person的指针，当 obj 在函数内部被重写时，它变成了一个指向本地对象的指针。而那个本地对象在函数执行结束时就被销毁了。

2.1.4 判断原始值和引用值

对于原始值的判断用 typeof

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

2.2上下文和作用域

2.2.1 执行上下文

全局上下文和函数上下文和块级上下文，对应相应的作用域

全局上下文

全局上下文对应全局对象

函数上下文

对应函数作用域

2.2.2 作用域链

上下文中的代码在执行的时候，会创建变量对象的一个作用域链（scope chain）。这个作用域链决定 了各级上下文中的代码在访问变量和函数时的顺序。代码正在执行的上下文的变量对象始终位于作用域 链的最前端。作用域链中的下一个变量对象来自包含上 下文，再下一个对象来自再下一个包含上下文，直到全局上下文

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(); 
//作用域链从执行的位置从里层向外层查询

2.3 垃圾回收

2.3.1 标记回收

垃圾回收程序运行的时候，会标记内存中存储的所有变量（记住，标记方法有很多种）。然后，它 会将所有在上下文中的变量，以及被在上下文中的变量引用的变量的标记去掉。在此之后再被加上标记 的变量就是待删除的了，原因是任何在上下文中的变量都访问不到它们了。随后垃圾回收程序做一次内 存清理，销毁带标记的所有值并收回它们的内存。

2.3.2 引用计数

对每个值都记录它被 引用的次数。声明变量并给它赋一个引用值时，这个值的引用数为 1。如果同一个值又被赋给另一个变 量，那么引用数加 1。类似地，如果保存对该值引用的变量被其他值给覆盖了，那么引用数减 1。当一 个值的引用数为 0 时，就说明没办法再访问到这个值了，因此可以安全地收回其内存了。垃圾回收程序 下次运行的时候就会释放引用数为 0 的值的内存

循环引用（内存浪费）

function problem() { 
 let objectA = new Object(); 
 let objectB = new Object(); 
 objectA.someOtherObject = objectB; //A引用B，引用+1
 objectB.anotherObject = objectA; //B引用A,引用+1
} 

objectA 和 objectB 通过各自的属性相互引用，意味着它们的引用数都是 2。在 标记清理策略下，这不是问题，因为在函数结束后，这两个对象都不在作用域中。而在引用计数策略下，objectA 和 objectB 在函数结束后还会存在，因为它们的引用数永远不会变成 0。如果函数被多次调 用，则会导致大量内存永远不会被释放。

2.4 内存管理

将内存占用量保持在一个较小的值可以让页面性能更好。优化内存占用的最佳手段就是保证在执行 代码时只保存必要的数据。如果数据不再必要，那么把它设置为 null，从而释放其引用。这也可以叫 作解除引用。

//下面的例子所示：
function createPerson(name){ 
 let localPerson = new Object(); 
 localPerson.name = name; 
 return localPerson; 
} 
let globalPerson = createPerson("Nicholas"); 
// 解除 globalPerson 对值的引用
globalPerson = null;

2.4.1 let和const提升性能

规定了块作用域，在执行后跳出后进行销毁，比var更快

2.4.2 隐藏类和删除类

function Article() { 
 this.title = 'Inauguration Ceremony Features Kazoo Band'; 
} 
let a1 = new Article(); 
let a2 = new Article(); 

V8 会在后台配置，让这两个类实例共享相同的隐藏类，因为这两个实例共享同一个构造函数和原 型。

但是如果使用a2.author = 'Jake'; 动态添加了属性以后，此时两个 Article 实例就会对应两个不同的隐藏类

解决方案就是避免 JavaScript 的“先创建再补充”（ready-fire-aim）式的动态属性赋值，并在 构造函数中一次性声明所有属性

//例子：
function Article() { 
 this.title = 'Inauguration Ceremony Features Kazoo Band'; 
 this.author = 'Jake'; 
} 
let a1 = new Article(); 
let a2 = new Article(); 
delete a1.author; //浪费内存
//将不要的属性设置为null可以优化内存
a1.author = null;

在代码结束后，即使两个实例使用了同一个构造函数，它们也不再共享一个隐藏类。动态删除属性 与动态添加属性导致的后果一样。最佳实践是把不想要的属性设置为 null。这样可以保持隐藏类不变 和继续共享，同时也能达到删除引用值供垃圾回收程序回收的效果。