前端百題斬【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.若是以爲這篇文章還不錯，來個分享、點贊吧，讓更多的人也看到javascript

2.關注公衆號執鳶者，與號主一塊兒斬殺前端百題。前端