前端百题斩【004】—— js中的包装对象

写该系列文章的初衷是“让每位前端工程师掌握高频知识点，为工做助力”。这是前端百题斩的第4斩，但愿朋友们关注公众号“执鸢者”，用知识武装本身的头脑

4.1 背景

有一个奇怪的现象不知道你们注意过没有，字符串、数字、布尔值都可以调用属性和方法，例如：

const str = '123';
console.log(typeof(str)); // string
console.log(str.toString()); // 123
const num = 123; 
console.log(typeof(num)); // number
console.log(num.toString()); // 123
const bool = true;
console.log(typeof(bool)); // boolean
console.log(bool.toString()); // true

看到这个现象，你们是否是感受很奇怪，这与咱们平时的想法是相悖的，毕竟咱们认为基本类型上面是不存在属性和方法的，这个时候主角包装对象就出现了。

4.2 包装对象

JS 的数值，布尔，字符串类型的变量，在必定条件下，也能够自动变成对象，这就是原始类型的包装对象。包装对象实际上是一种特殊的引用类型，其与引用类型的主要区别在于生命周期。

1. 通常的引用类型在使用new建立其实例时，在执行流离开当前做用域以前一直都保存在内存中；
2. 包装类型的对象只存在该行代码的执行瞬间，而后会当即被销毁。（也意味着在运行时不能为基本类型添加属性和方法）

4.3 包装对象后台执行流程

基本类型中的String、Number、Boolean在调用属性和方法的时候，后台是怎样执行的呢？其实整个过程能够简化为三步：

1. 建立一个对象类型的实例，例如字符串则建立一个String类型的实例；
2. 调用该实例对象上的特定方法；
3. 销毁该实例。

以字符串为例，来演示该流程：

const str = 'abc';
const strNew = str.substring(0, 2);

在运行到str.substring(0, 2)的时候其实偷偷执行了如下三步：

let strObj = new String(str);
const strNew = strObj.substring(0, 2);
strObj = null;

4.4 扩展

1. 包装对象和一样的原始类型的值相等吗？

不相等。由于包装对象是引用类型，原始类型是基本类型；包装对象的最大目的，首先是使得 JavaScript 的对象涵盖全部的值，其次使得原始类型的值能够方便地调用某些方法。

2. 如何给基本类型添加属性和方法？

在基本包装对象的原型下面添加，每一个对象都有原型。

3. 同一个字符串调用两次相同的方法其包装对象相等吗？

不相等。调用结束后，包装对象实例会自动销毁。这意味着，下一次调用字符串的属性时，实际是调用一个新生成的对象，而不是上一次调用时生成的那个对象，这也说明了为何不能直接给字符串、数字、布尔值添加属性和方法。

1.若是以为这篇文章还不错，来个分享、点赞吧，让更多的人也看到

2.关注公众号执鸢者，与号主一块儿斩杀前端百题。