JavaScript高级程序设计（第4版）读书笔记：八-优快云博客

JavaScript程序设计

3 变量、作用域与内存

相比于其他语言，JavaScript 中的变量可谓独树一帜。正如 ECMA-262 所规定的，JavaScript 变量是松散类型的，而且变量不过就是特定时间点一个特定值的名称而已。由于没有规则定义变量必须包含什么数据类型，变量的值和数据类型在脚本生命期内可以改变。这样的变量很有意思，很强大，当然也有不少问题。本章会剖析错综复杂的变量。

3.1 原始值与引用值

ECMAScript 变量可以包含两种不同类型的数据：原始值和引用值。**原始值（primitive value）**就是最简单的数据，引用值（reference value）则是由多个值构成的对象。

在把一个值赋给变量时，JavaScript 引擎必须确定这个值是原始值还是引用值。上一章讨论了 6 种原始值：Undefined、Null、Boolean、Number、String 和 Symbol。保存原始值的变量是按值（by value）访问的，因为我们操作的就是存储在变量中的实际值。

引用值是保存在内存中的对象。与其他语言不同，JavaScript 不允许直接访问内存位置，因此也就不能直接操作对象所在的内存空间。在操作对象时，实际上操作的是对该对象的引用（reference）而非实际的对象本身。为此，保存引用值的变量是按引用（by reference）访问的。

简单的说，原始值即原始类型的值，引用值即对象类型的值。

Note: 在很多语言中，字符串是使用对象表示的，因此被认为是引用类型。ECMAScript打破了这个惯例。

3.1.1 动态属性

原始值和引用值的定义方式很类似，都是创建一个变量，然后给它赋一个值。不过，在变量保存了这个值之后，可以对这个值做什么，则大有不同。对于引用值而言，可以随时添加、修改和删除其属性和方法。比如，看下面的例子：

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

这里，首先创建了一个对象，并把它保存在变量 person 中。然后，给这个对象添加了一个名为 name 的属性，并给这个属性赋值了一个字符串"Nicholas"。在此之后，就可以访问这个新属性，直到对象被销毁或属性被显式地删除。

原始值不能有属性，尽管尝试给原始值添加属性不会报错。比如：

let name = "Nicholas"; 
name.age = 27; 
console.log(name.age); // undefined

在此，代码想给字符串 name 定义一个 age 属性并给该属性赋值 27。紧接着在下一行，属性不见了。记住，只有引用值可以动态添加后面可以使用的属性。

注意，原始类型的初始化可以只使用原始字面量形式。如果使用的是 new 关键字，则 JavaScript 会创建一个 Object 类型的实例，但其行为类似原始值（也就是说创建的实际上是一个引用值，可以动态添加属性）。下面来看看这两种初始化方式的差异：

let name1 = "Nicholas"; 
let name2 = new String("Matt"); 
name1.age = 27; 
name2.age = 26; 
console.log(name1.age); // undefined 
console.log(name2.age); // 26 
console.log(typeof name1); // string 
console.log(typeof name2); // object

3.1.2 复制值

除了存储方式不同，原始值和引用值在通过变量复制时也有所不同。在通过变量把一个原始值赋值到另一个变量时，原始值会被复制到新变量的位置。请看下面的例子：

let num1 = 5; 
let num2 = num1;

这里，num1 包含数值 5。当把 num2 初始化为 num1 时，num2 也会得到数值 5。这个值跟存储在 num1 中的 5 是完全独立的，因为它是那个值的副本（对于原始值来说是按值复制，得到的是原有值的副本）。

这两个变量可以独立使用，互不干扰。具体来说，原始值直接存储在栈内存中，将原始值赋值到另一个变量时，将会在栈内存中创建一个该原始值的副本进行存储，对这两个值的修改操作互不影响。

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

let obj1 = new Object(); 
let obj2 = obj1; 
obj1.name = "Nicholas"; 
console.log(obj2.name); // "Nicholas"，实际上，obj2 和 obj1 指向的对象是同一个，obj1 对对象的属性进行修改，obj2 也会受到影响。

在这个例子中，变量 obj1 保存了一个新对象的实例。然后，这个值被复制到 obj2，此时两个变量都指向了同一个对象。在给 obj1 创建属性 name 并赋值后，通过 obj2 也可以访问这个属性，因为它们都指向同一个对象。

3.1.3 比较值

对于原始值的比较，仍然遵循我们之前提到的规则（==和===都是比较它们的值是否相等。但==会在比较之前进行类型转换，而===不会）。比如下面这个例子：

let a = 5;
let b = 5;
console.log(a == b);  // true，值相等
console.log(a === b); // true，类型相同且值相等

let c = '5';
console.log(a == c);  // true，因为'5'会被转换成数字5
console.log(a === c); // false，因为类型不同（数字和字符串）

而对于引用值的比较，则需要注意：引用值比较的是内存地址，而不是对象内容。具体如下面这个例子：

let obj1 = { name: "Alice", age: 25 };
let obj2 = { name: "Alice", age: 25 };
let obj3 = obj1;

console.log(obj1 == obj2); // false - 不同内存地址
console.log(obj1 == obj3); // true - 同一内存地址
console.log(obj1 === obj2); // false - 不同内存地址
console.log(obj1 === obj3); // true - 同一内存地址

即：引用值的 == 和 === 本质上都是比较内存地址，只有指向同一对象的变量才会相等。

3.1.4 传递参数

ECMAScript 中所有函数的参数都是按值传递的。这意味着函数外的值会被复制到函数内部的参数中，就像从一个变量复制到另一个变量一样。如果是原始值，那么就跟原始值变量的复制一样，如果是引用值，那么就跟引用值变量的复制一样。对很多开发者来说，这一块可能会不好理解，毕竟变量有按值和按引用访问，而传参则只有按值传递。

在按值传递参数时，值会被复制到一个局部变量（即一个命名参数，或者用 ECMAScript 的话说，就是 arguments 对象中的一个槽位）。

在按引用传递参数时（如C++、C#等语言中），值在内存中的位置会被保存在一个局部变量，这意味着对本地变量的修改会反映到函数外部。（因为ECMAScript 中所有函数的参数都是按值传递的，所以这在 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 互不干扰，它们只不过碰巧保存了一样的值。如果 num 是按引用传递的，那么 count 的值也会被修改为 30。这个事实在使用数值这样的原始值时是非常明显的。

再来看一个引用值的例子：

// 示例1：可以修改对象属性
function modifyProperties(obj) {
    obj.property = "modified value"; // 这修改的是对象的内容
}

let myObj = new Object();
myObj.property = "original value";
modifyProperties(myObj);
console.log(myObj); 
// 输出: { property: "modified value" } - 对象内容被修改，因为 obj 指向外面 myObj 指向的堆内存上的对象

// 示例2：无法修改原始变量的引用
function tryToChangeReference(obj) {
    // 这只是修改了局部参数obj的引用
    // obj 在函数内部被重写时，它变成了一个指向本地对象的指针。而那个本地对象在函数执行结束时就被销毁了
    obj = new Object(); 
    obj.property = "new value";
}

let originalObj = new Object();
originalObj.property = "old value";
tryToChangeReference(originalObj);
console.log(originalObj); 
// 输出: { property: "old value" } - 原始对象未被替换

3.1.5 确定类型

前一章提到的 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); // 变量 person 是 Object 吗？
console.log(colors instanceof Array); // 变量 colors 是 Array 吗？
console.log(pattern instanceof RegExp); // 变量 pattern 是 RegExp 吗？

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

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