JavaScript 之 原始值包装类型

原始值与引用值

ECMAScript 变量可以包含两种不同类型的数据：原始值（原始类型的值）和引用值（引用类型的值）。

1. 原始值就是最简单的数据（基本数据类型）

2. 引用值则是由多个值构成的对象（引用数据类型）。

在把一个值赋给变量时，JavaScript 引擎必须确定这个值是原始值还是引用值。

JS 6 种原始值：Undefined、Null、Boolean、Number、String 和 Symbol。保存原始值的变量是按值访问的，因为我们操作的就是存储在变量中的实际值。

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

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

动态属性

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

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

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

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

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

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

注意，原始类型的初始化可以只使用原始字面量形式。如果使用的是 new 关键字，则 JavaScript 会创建一个 Object 类型的实例，但其行为类似原始值。下面来看看这两种初始化方式的差异：

var name1 = "Nicholas"; 
​
var 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 

原始值包装类型

对象是 JavaScript 语言最主要的数据类型，三种原始类型的值：数字、字符串、布尔值——在一定条件下，也会自动转为对象，也就是原始值包装类型，也叫原始值的“包装对象”。

所谓“包装对象”，指的是与数字、字符串、布尔值分别相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成（包装成）对象。

var v1 = new Number(123);
var v2 = new String('abc');
var v3 = new Boolean(true);
​
typeof v1 // "object"
typeof v2 // "object"
typeof v3 // "object"
​
v1 === 123 // false
v2 === 'abc' // false
v3 === true // false

上面代码中，基于原始值，生成了三个对应的包装对象。可以看到，v1、v2、v3都是对象，且与对应的简单类型值不相等。

包装对象的设计目的，首先是使得“对象”这种类型可以覆盖 JavaScript 所有的值，整门语言有一个通用的数据模型，其次是使得原始类型的值也有办法调用自己的方法。

区分原始类型与实例对象

使用 new 调用原始值包装类型的构造函数，与调用同名的转型函数并不一样。

var value = "25"; 
​
var number = Number(value); // 转型函数
console.log(typeof number); // "number" 
​
var obj = new Number(value); // 构造函数
console.log(typeof obj); // "object" 

在这个例子中，变量 number 中保存的是一个值为 25 的原始数值，而变量 obj 中保存的是一个Number 的实例对象。

可以显式地使用 Boolean、Number 和 String 构造函数创建原始值包装对象。不过应该在确实必要时再这么做，否则容易让开发者疑惑，分不清它们到底是原始值还是引用值。在原始值包装类型的实例上调用 typeof 会返回"object"，所有原始值包装对象都会转换为布尔类型结果都为 true。

Number、String和Boolean这三个原生对象，如果不作为构造函数调用（即调用时不加new），而是作为普通转型函数调用，常常用于将任意类型的值转为数值、字符串和布尔值。

// 字符串转为数值
Number('123') // 123
​
// 数值转为字符串
String(123) // "123"
​
// 数值转为布尔值
Boolean(123) // true

Object 构造函数作为一个工厂方法，能够根据传入值的类型返回相应原始值包装类型的实例。比如：

var obj = new Object("some text"); 
console.log(obj instanceof String); // true 

如果传给 Object 的是字符串，则会创建一个 String 的实例。如果是数值，则会创建 Number 的实例。布尔值则会得到 Boolean 的实例。

虽然不推荐显式创建原始值包装类型的实例，但它们对于操作原始值的功能是很重要的。每个原始值包装类型都有相应的一套方法来方便数据操作。

原始类型与实例对象的自动转换

某些场合，原始类型的值会自动当作包装对象调用，即调用包装对象的属性和方法。这时，JavaScript 引擎会自动将原始类型的值转为包装对象实例，并在使用后立刻销毁实例。

比如，字符串可以调用length属性，返回字符串的长度。

var s1 = "some text"; 
var length = s1.length; 

上面代码中，s1是一个字符串，本身不是对象，不能调用length属性。JavaScript 引擎自动将其转为包装对象，在这个对象上调用length属性。调用结束后，这个临时对象就会被销毁。这就叫原始类型与实例对象的自动转换。

具体来说，当第二行访问 s1 时，是以读模式访问的，也就是要从内存中读取变量保存的值。在以读模式访问字符串值的任何时候，后台都会执行以下 3 步：

(1) 创建一个 String 类型的实例；

(2) 调用实例上的特定方法；

(3) 销毁实例。

var s1 = "some text"; 
var length = s1.length; 
​
// 等同于
var strObj = new String(s1); 
var length = strObj.length; 
strObj = null; 

这种行为可以让原始类型的值拥有对象的行为。对布尔值和数字而言，以上 3 步也会在后台发生，只不过使用的是 Boolean 和 Number 包装类型而已。

引用类型与原始值包装类型的主要区别在于对象的生命周期。在通过 new 实例化引用类型后，得到的实例会在离开作用域时被销毁，而自动转换生成的原始值包装对象则只存在于访问它的那行代码执行期间。

自动转换生成的包装对象是只读的，无法修改。不能在运行时给原始值添加属性和方法。比如下面的例子：

var s1 = "some text"; 
s1.color = "red"; 
console.log(s1.color); // undefined 

这里的第二行代码尝试给字符串 s1 添加了一个 color 属性。可是，第三行代码访问 color 属性时，它却不见了。原因就是第二行代码运行时会临时创建一个 String 对象，而当第三行代码执行时，这个对象已经被销毁了。实际上，第三行代码在这里创建了自己的 String 对象，但这个对象没有 color 属性。

实例方法

三种包装对象各自提供了许多实例方法。这里介绍两种它们共同具有、从Object对象继承的方法：valueOf()和toString()。

valueOf()

valueOf()方法返回包装对象实例对应的原始类型的值。

valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

new Number(123).valueOf()  // 123
new String('abc').valueOf() // "abc"
new Boolean(true).valueOf() // true

toString()

toString()方法返回对应的字符串形式。

toString()通常用于把数据转为字符串类型。

new Number(123).toString() // "123"
new String('abc').toString() // "abc"
new Boolean(true).toString() // "true"

区别

基本上所有的JavaScript数据类型都有valueOf()，toString()方法，null除外，这两个方法解决了JavaScript值运算和显示的问题。

• valueOf()会把数据类型转换成原始类型，也就是说原来是什么类型，转换后还是什么类型，日期类型除外

• toString()会把数据类型转换成string类型，也就是说不管原来是什么类型，转换后一律是string类型

使用场景

• valueOf()偏向于运算，toString()偏向于显示

• 对象转换时，优先调用toString()

• 强转字符串的情况下，优先调用toString()方法；强转数字的情况下优先调用valueOf()

• 正常情况下，优先调用toString()

• 在有运算操作符的情况下valueOf()的优先级高于toString()，这里需要注意的是当调用valueOf()方法无法运算后还是会再调用toString()方法

总结

调用valueOf()

对象	值	类型
Array	数组本身	Array
Boolean	Boolean 值	Boolean
Date	存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC	Number
Function	函数本身	Function
Number	数字值	Number
Object	对象本身，这是默认情况	Object
String	字符串	String

调用toString()

对象	值	类型
Array	数组的元素被转换为字符串，这些字符串由逗号分隔，连接在一起。其操作与 Array.toString() 和 Array.join() 方法相同	String
Boolean	字符串"true"或者 "false"	String
Date	字符串日期，如"Fri Dec 23 2016 11:24:47 GMT+0800 (中国标准时间)"	String
Function	函数字符串	String
Number	字符串形式的数字	String
Object	"[object Object]"	String
String	字符串	String