JavaScript中包装类型

港控/mmm° 2022-02-20 14:43 218阅读 0赞

先看一道题：

下面哪些语句可以 在JS里判断一个对象oStringObject是否为String。

oStringObject instanceof String  (√)
    typeof oStringObject == 'string' （x）

JS 中值的类型分为原始值类型和对象类型。原始值类型包括 number, string, boolean, null 和 undefined；对象类型即 object。首先原始值类型它就不是对象。

另外，要注意 ‘hello’ 和 new String(‘hello’) 的区别，前者是字符串字面值，属于原始类型，而后者是对象。用 typeof 运算符返回的值也是完全不一样的：

typeof 'hello';  // 'string'
    typeof new String('hello');  // 'object'

之所以很多人分不清字符串字面值和 String 对象，归根结底就是 JS 的语法对你们太过纵容了。当执行 ‘hello’.length 时，发现可以意料之中的返回 5，你们就觉得 ‘hello’ 就是 String 对象，不然它怎么会有 String 对象的属性。其实，这是由于 JS 在执行到这条语句的时候，内部将 ‘hello’ 包装成了一个 String 对象，执行完后，再把这个对象丢弃了，这种语法叫做 “装箱”，在其他面向对象语言里也有（如 C\#）。不要认为 JS 帮你装箱了，你就可以在写代码的时候不分箱里箱外了！

**1.JavaScript对象分类**

看一张图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]  
附加知识：  
JavaScript对象：Object、Array、Function、Data、RegExp、Boolean、Number、String、Global、Math  
Browser对象：Window、Navigator、Screen、History、Location  
HTML DOM对象：DOM Document、DOM Element、DOM Attribute、DOM Event

JavaScript对象划分成“引用类型”、“基本包装类型”和“内置对象”三块内容。

1.引用类型的值（对象）是一个引用类型的一个实例。

引用类型有时候也被称为对象定义，因为它们描述是一类对象所具有的属性和方法。

为了便于操作基本数据类型，ECMAScript还提供了3个特殊的引用数据类型（基本包装类型）：Boolean、Number和String。

在实际中我们每读取一个基本数据值的时候，后台就会创建一个对应的基本包装类型对象，从而让我们能够调用一些方法操作这些数据。

如以下示例：

var s1 = "some text";
    var s2 = s1.substring(2);

猜猜后台会做什么样的事情，走，我们一起来看看:  
1、String类型的一个实例；  
2、在实例中调用指定的方法；  
3、销毁这个实例。

可以将以上三个步骤想像成是执行以下ECMAStript代码。

var s1 = new String("some text");
    var s2 = s1.substring(2);
    s1 = null;

**2.引用类型与基本包装类型的区别**

它们的对象生命周期不同：

1.引用类型：使用new创建引用类型的实例，在执行数据流离开当前作用域时会一直存储在内存中。  
2.基本包装类型：自动创建基本包装类型的对象，只执行一行代码的瞬间之后就会立即销毁。  
　　　　  
这意味着在运行时为基本包装类型值添加属性和方法是无效的。

再看一个例子：  
![在这里插入图片描述][20190413235815263.png]  
说明了上面的生命周期。

针对Boolean包装类，也有一个注意事项，我们知道一个引用类型，除非它是null或者undefined，否则它永远都是true，所以`new Boolean(false) && true`结果是true。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]  
再看一些例子：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]  
总结：基本包装类型自动创建的对象在对象被调用的时刻存在，调用完后就被销毁了，而使用new关键字创建的引用类型的实例，对象在当前作用域都存在。

//基本包装类型对象
    1 var s='some';2 s.age='Joel';3 console.log(s.age);//undefined

如上代码在给字符串s添加age属性，但是当代码执行到第三行时name属性已经被销毁了，当代码执行第三行时，又创建了一个String 实例，但是这个实例并没有age属性所以输出undefined；

//显示实例化包装类型
    1 var s=new String('some'); 2 s.age='Joel'; 3 console.log(s.age);//Joel

参考文章：  
[https://www.nowcoder.com/profile/2496345/test/23255344/14709\#summary][https_www.nowcoder.com_profile_2496345_test_23255344_14709_summary]  
[https://www.cnblogs.com/john-sr/p/5731247.html][https_www.cnblogs.com_john-sr_p_5731247.html]  
[https://www.cnblogs.com/huangxincheng/p/4141883.html][https_www.cnblogs.com_huangxincheng_p_4141883.html]  
[https://www.douban.com/note/642521951/][https_www.douban.com_note_642521951]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220220/83d7edb607b446fd8344f2f29a35836e.png
[20190413235815263.png]: /images/20220220/69d55ea8716b40fca5db562743b658d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220220/a6c2c6d7bb37454eaee5789b70db16a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220220/ed2e5eef614c4e509ca1747fb586e37d.png
[https_www.nowcoder.com_profile_2496345_test_23255344_14709_summary]: https://www.nowcoder.com/profile/2496345/test/23255344/14709#summary
[https_www.cnblogs.com_john-sr_p_5731247.html]: https://www.cnblogs.com/john-sr/p/5731247.html
[https_www.cnblogs.com_huangxincheng_p_4141883.html]: https://www.cnblogs.com/huangxincheng/p/4141883.html
[https_www.douban.com_note_642521951]: https://www.douban.com/note/642521951/