最详细的JavaScript包装类及其方法

什么是包装类？

一，概念

为了便于操作基本类型值，JS 提供了 三个 特殊的引用类型：Boolean、Number、String（undefined和null没有自己的包装类）。这些类型和其他引用类型相似，但同时 也具备 与各自基本类型相应的特殊行为。 实际上：每当读取一个基本类型值的时候， “后台就会创建一个 对应的基本包装类型的对象”，从能能够调用一些方法来操作这些数据。

二，方法

所有的包装类都有 valueOf() 和 toString() 方法，还有charAt(), indexOf()等方法。

valueOf（）

返回对象的字符串，数值或布尔值表示。

let a = 10;
let b = '10';
let c = false;
let d = { test: '这是测试值' };
let e = ['m', 'n', 'o'];
console.log(a.valueOf());//10
console.log(b.valueOf());//10
console.log(c.valueOf());//false
console.log(d.valueOf());//{test: "这是测试值"}
console.log(e.valueOf());//(3) ["m", "n", "o"]

toString（）

返回对象的字符串表示。

let a = 10;
let b = '10';
let c = false;
let d = { test: '这是测试值' };
let e = ['m', 'n', 'o'];
console.log(a.toString());//10
console.log(b.toString());//10
console.log(c.toString());//false
console.log(d.toString());//[object Object]
console.log(e.toString());//m,n,o

valueOf（）与toString（）的区别

console.log(d.valueOf());//{test: "这是测试值"}
console.log(e.valueOf());//(3) ["m", "n", "o"]

console.log(d.toString());//[object Object]
console.log(e.toString());//m,n,o

从上面两段代码可以看出，valueOf返回的是对象本身，而toString()表示对象的时候值为[object Object]，表示数组的时候是以逗号连接的字符串，相当于Array.join()。

toString()在对象上是怎么样操作的？

let a = '3';
console.log(+a);//3

字符串转为数字，相当于number的方法

let test1 = { num: '123' };
console.log(+test1);//NaN
let test2 = {
toString: function () {
return '123'
},
valueOf: function () {
return '321'
}
}
console.log(+test2);//321
let test3 = {
valueOf: function () {
return '321'
},
toString: function () {
return '123'
}
}
console.log(+test3);//321
let test4 = {
toString: function () {
return '123'
}
}
console.log(+test4);//123

从上面的例子可以看出操作对象的时候，如果有valueOf()会先调用valueOf()方法，然后调用Number()方法进行转换，如果只有toString()方法,就调用toString()方法，所以valueOf()的优先级高于toString()。

let test1 = { num: '123' };
alert(+test1);//[object Object]
let test2 = {
toString: function () {
return '123'
},
valueOf: function () {
return '321'
}
}
alert(+test2);//123
let test3 = {
valueOf: function () {
return '321'
},
toString: function () {
return '123'
}
}
alert(+test2);//123
let test4 = {
valueOf: function () {
return '321'
}
}
alert(+test4);//[object Object]

从上面的例子可以看出,alert弹出对象的时候，只调用它的toString()方法，和valueOf()无关。

三， 组包 和 拆包

原始值不是对象，无法拥有自己的属性，但因为的包装类的存在，原始值就好似可以拥有自己的属性了，但其拥有的属性又有点特殊之处。

组包： 基本数据 类型转成 引用数据 类型

1. 显式组包：new 包装类()
2. 隐式组包：

let test=1;
test.toString(); //'1' 这个过程就有隐式组包，因为只有对象才有方法

拆包： 引用数据 类型 转成 基本数据 类型

1. 显式组包：包装类.valueOf()
2. 隐式组包：

let test = 1;
test.toString(); // '1' 组包 test = new Number(test);
typeof test;// number 隐式拆包了