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

前言

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

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

'abc'.length 
// 3
typeof 'abc'

上面代码中，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新手在操作实例对象时，常常会陷入误区。

转载于:https://juejin.im/post/5cf342b5f265da1bcf5dc48a