Day 16 JavaScript boxing vs unboxing

boxing:

封装可以让原始型态的资料暂时转成物件，这样他才可以使用属性或方法。
遇到使用字面值(literal)[注1]的原始型态资料後面接了一个方法时，JS 会自动帮他封装(boxing)，让字面值能有属性或方法可用。
但如果使用 new 去建立原始型态的资料，因为会建立出物件，所以就不会用到封装了。

假设我宣告一个变数 a，将字串"abc"赋值给他，接着执行一个 substring 方法，照理说原始型态的资料不能使用属性或方法才对，只有物件才能使用，所以这时候在 JS 就会发生 boxing。

boxing 会偷偷做以下三件事：

1. 当 JS 发现 substring() 方法前面的 a 不是物件，他会自动用 new 这个运算符帮字串 "abc" 建立一个 b 物件。
2. 因为 b 是物件，所以可以使用方法，接着让 b 物件使用 substring() 方法。
3. 用完後把 b 物件 给删除，最後只留下原本的 a 常数。

const a = "abc"
a.substring()

ex:如果我想建立一个阵列出来分别可用两种方式建立：

• 用 literal 方式：let a = [ ]
  [ ] 就是一个符号，用来代表 array，把 a 指向 [ ]
• 用正规方式：let a = new Array()
  用 new 会建立一个 a 物件，把 a 物件指向 [ ]

unboxing:

解封装就是将他从物件转回原始型态。
可以用 valueOf() 或是 toString()方法让他转回来。

// 建立一个 s 物件，指向字串'Hello World!'
const s = new String('Hello World!')
// 印出 s 的型态是 object
console.log(typeof s)
// 印出 s 的值的型态是 string
console.log(typeof(s.valueOf()))
// 直接把 s 从物件转回字串，印出 string
console.log(typeof(s.toString()))

[注1]
literal:字面上的意思，用某种符号去代表那个东西。
{ }、[ ]、" "、' ' 都是 literal，分别代表物件、阵列以及字串。

参考：
[1]你懂 JavaScript 吗？#7 原生功能（Natives）
[2]What is boxing and unboxing in JavaScript?
[3]JavaScript装箱及拆箱boxing及unBoxing用法解析