追求JS小姊姊系列 Day21 -- 工具人、姐妹不只身份的差别（上）： 基本型别包裹器（wrapper object）

前情提要：

继续讲着工具力的源头

我：所以你们这些工具人，跟她的姐妹差别就是有没有能力？

//primitive
let x = 12;
let y = "hi";
let z = true;

//用typeof 判断型别
typeof x; //Number
typeof y; //String
typeof z; //Boolean

（方函式看了阿物件，两人点了点头後）
方函式：其实那也不完全正确，但我觉得用讲的不容易理解，你直接看吧。（拿出手机）

看似正常的故事？

（画面中充满了人，似乎是一个聚会）

JS：虽说是我的生日，但总觉得有点无聊啊。
字串姐：那让我来增加一点生日感觉吧（手又发光！空气中接着出现了红色庆祝文字）

let hbdString = "生日快乐JS"; 
hbdString.fontColor("red");

我：等等，发光跟接踵而来不寻常的现象，难道？！

她们也有血继限界能力？！

....不对

那是谁？

瞬间能力的原理 -- 包裹物件

发光的瞬间，出现在画面前的是：长像物件的女子覆盖住字串姐，接着就迅速消失了，以下用程序码来试着解释

let tempObj = new String("生日快乐JS");
hbdString = tempObj.fontColor("red"); //得到红色效果
tempObj = null;

这瞬间会透过对应的物件建构器，将hbdString包装成一个物件，然後透过原型链找fontColor()这个方法。

方函式：没错，那为何说是一瞬间的能力呢？
还记得它如果变成物件的话，应该可以自订属性或方法这件事吧？

let hdbString = "生日快乐JS";
let hbdString2 = new String("换方式生日快乐");

//分别赋予属性
hbdString.text = "生日快乐";
hbdString2.text = "生日快乐2~";

//读取属性
console.log(hbdString.text);
console.log(hbdString2.text);

hbdString结果却是显示undefined！

hbdString无法取到自订的属性text，因为它本身其实还是基本型别(primitive)。

好，那我们再整理一下包裹器的整个流程：

let x = "hi";
x.length; 

短短的一行内容，其实做了以下的事情：

1. 创造一个新物件，透过new串连对应的物件原型，
2. 透过原型链，从原型内找寻要使用的方法
3. 回传使用方法後的值
4. 立刻删除刚刚建立的物件
5. 变回基本型别内容

这个对应的物件也就是所谓的「基本型别包裹器」(Primitive Wrapper)。

除了String之外，还有许多的包裹器，以下简单条列常见的：

Number();
Boolean();
String();

//以及之前介绍过的Date
Date();
Map();

什麽是包裹器？

在转换的那一刻，我自己会视为对应型别物件的实例(instance)，可以透过instanceof这个方法解释：

let x = "hi 87";
x = new String("hi 87");

x instanceof String; // true

上面提过，那个时刻会new一个新的物件，由上结果可试着推论，建构出来的x是String的实例。
但实际执行上，它只会是一瞬间的实例，随後就转回基本型别内容。

如何取得包裹器内的值

如果想要取得内部的值，可透过valueOf()来达成。

let x = new String("hi 87");
x.valueOf(); // "hi 87"

基本型别还是建构式？都几？

讲了这麽多，所以应该选择哪个使用呢？以下提供两个点：

1. 假设我们今天要判断输入值的型别
当你用建构式用一个String:

let x = new String("i am string");
function isString(input){
    if(typeof x  === "string")return "是字串呢";
}
isString(x);
console.log(isString(x));

当你用基本型别用String:

let x = "hi";
function isString(input){
    if(typeof x  === "string")return "是字串呢";
}
isString(x)
console.log(isString(x));

当使用建构式建立的内容，都是物件，还需要再多一个步骤的处理。

另一个原因是：

2. 基本型别在处理与运算时的效率也远高於物件型别。

-- to be continued --

那今天就到这边搂！
每天的休息，是为了後面的追求，明天见。

reference:

重新认识 JavaScript: Day 23 基本型别包裹器 Primitive Wrapper
JavaScript Primitive Wrapper Types