包装对象浅谈——对比数组、对象（新手必看）

前言

首先咱们来看一段代码示例

var str='hello';
var num=1;
var bl=true;
var arr=[1,2,3];
var obj={x:1};

str.toString();
// "hello"
num.toString();
// "1"
bl.toString();
// "true"
arr.toString();
// "1,2,3"
obj.toString();
// "[object Object]"”
复制代码

从上面的代码来看，彷佛str，num，bl，arr，obj这五个变量都是实例对象，由于它们均可以调用对象的实例方法toString，然而经过typeof方法对着五个变量进行类型判断，发现状况并不是如此。

typeof str
// string

typeof num
// number

typeof bl
// boolean

typeof arr
// object

typeof obj
// object
复制代码

经过上面的代码，咱们发现，实际上只有arr、obj这两个变量才会被识别成object，其他的str、num、bl则分别对应string、number、boolean数据类型，这彷佛和咱们以前的判断很矛盾，在这里咱们就须要引出JavaScript中的包装对象了。

包装对象

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

所谓“包装对象”，指的是与数值、字符串、布尔值分别相对应的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
复制代码

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

正是有了包装对象的存在，咱们才能够把字符串、数值、布尔值这三个原始类型的值当成实例对象进行使用，调用各自对应的包装对象的实例方法和实例属性。

自动换成包装对象

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

好比，字符串能够调用length属性，返回字符串的长度。

'abc'.length 

// 3

typeof 'abc'

// string
复制代码

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

var str = 'abc';
str.length // 3

// 等同于
var strObj = new String(str)
// String {
//   0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"
// }
strObj.length // 3

复制代码

被包装成的对象≠对象

虽然字符串等类型的值能够临时转换成包装对象，可是这些值并非真正的对象。

var s1 = 'Hello World';
s1.x = 123;
s1.x // undefined

typeof s1
// string

var s2=new String('Hello World');
s2.x=123;
s2.x // 123;

typeof s2;
// object
复制代码

从上面的例子，咱们能够看出，被包装成的实例对象本质上依旧是字符串类型，所以这些值即便被包装成对象，也只是只读对象。

包装对象自定义方法

除了原生的实例方法，包装对象还能够自定义方法和属性，供原始类型的值直接调用。好比，咱们能够新增一个double方法，使得字符串和数字翻倍。

String.prototype.double = function () {
  return this.valueOf() + this.valueOf();
};

'abc'.double()
// abcabc

Number.prototype.double = function () {
  return this.valueOf() + this.valueOf();
};

(123).double() // 246
复制代码

总结

JavaScript的包装对象提供给了开发者像操做对象同样操做string、number、boolean值的能力，体现了JavaScript是一门面向对象编程的开发语言。

同时，开发者也应该牢记被包装成的实例对象与真正的实例对象的区别，避免一些操做错误，这也是JavaScript新手在操做实例对象时，经常会陷入误区。