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; //  這個對象被銷燬
｝複製代碼