JS包装对象

前言：

最近，在学习Vue Composition API时，遇到了包装对象这个名词。 

import { value } from 'vue'

const MyComponent = {
  setup(props) {
    const msg = value('hello')
}

这边的value（）返回的就是一个value wrapper（包装对象）。因此，这边安利的一下什么是包装对象。

我们都知道，引用类型有方法和属性，但是基本类型是木有的，但是你一定见过这样的代码

 var str = 'hello'; 
 str.chartAt(0);//h

str在这边，被定义为一个基本类型string,那么为什么基本类型会有chartAt方法呢？因此引出我们今天要讲的包装对象

包装对象：

存取字符串、数字或布尔值的属性时，创建的临时对象称为包装对象。包装对象只是偶尔用来区分字符串值和字符串对象、数字和数值对象以及布尔值和布尔对象。由于字符串、数字和布尔值的属性都是只读的，并且不能给它们定义新属性，因此它们是有别于对象的。

也许你看不明白这段话的意思，用一段代码来解释

var str = 'hello';
str.number = 10; 
console.log(str.number)//undefined
//js内部会执行如下代码
var str = new String('hello')
str.number = 10;
str = null

可以看到，str在js内部被包装成new String()对象，然后str又变成null。这就是包装对象的过程，在js内部执行。

基本类型上不存在属性和方法，因此将基本类型包装成对应的对象，让他们能够调用自己的实例和方法，这也说明了为什么str能够调用chartAt、toString等方法。之后让包装对象销毁,因此str.number也是undefined

包装对象和普通对象的区别

生存期；引用类型所创建的对象，在执行的期间一直在内存中，而基本包装对象只是存在了一瞬间。

所以我们无法直接给基本类型添加方法：

var str = 'hello';
str.number = 10; 
console.log(str.number)//undefined

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

答案是给基本类型的对象原型上添加方法和属性

//给字符串添加方法  要写到对应的包装对象的原型下才行
var str = 'hello';
String.prototype.last= fuction(){ 
    return this.charAt(this.length);
}; 
str.last(); // 5 执行到这一句，后台依然会偷偷的干这些事


//相当于
｛ 
    var str = new String('hello');// 找到基本包装对象，new一个和字符串值相同的对象，
    str.last();  // 通过这个对象找到了包装对象下的方法并调用 
    str =null; //  这个对象被销毁
｝