JavaScript 你不知道的基本包装类型

xingpingz 发布于2019-08-20 10:42 / 3220人阅读

摘要：你不知道的基本包装类型声明本文的大部分内容参考自高级程序设计第三版中文版，中间夹杂一些自己阅读这部分内容时的思路。而且，上面的步骤同样适用于类型的类型对应的布尔值和数字值。

JavaScript 你不知道的基本包装类型

声明：本文的大部分内容参考自《JavaScript 高级程序设计（第三版）》（中文版 P.118），中间夹杂一些自己阅读这部分内容时的思路。

JavaScript 中共有 6 种基本数据类型：Undefined、Null、Boolean、Number、String、Symbol (new in ES 6) ！

举例子入门

基本数据类型的值不是对象，因而从逻辑上讲它们不应该有方法或者属性，然而事实并不是我们所想的那样，看法宝：

var str = "hello world";
str.length;              // 11
str.toUpperCase();       // HELLO WORLD

你对上面的现象有疑问吗？没有的话，可以关掉这个页面了。

引入基本包装类型

为了便于操作基本数据类型的值，JavaScript 中的原始数据类型的值会在后台隐式地被包装为对象，从而引出了基本包装类型（primitive wrapper type）这个概念。

【书中原话】每当读取一个基本类型的值的时候，后台就创建一个对应的基本包装类型的对象，从而让我们能够调用一些方法来操作这些数据。

这也是为什么书中会提到这句话，ECMAScript 还提供了3个特殊的引用类型：Boolean、Number、String。哦，不对了，现在不是又出现了一种新的数据类型吗？所以，这句话应该改为：ECMAScript 还提供了4个特殊的引用类型：Boolean、Number、String、Symbol。

除了 null 和 undefined，所有的原始值都有等价的、由对象包装原始值的形式表达，取而代之，null 和 undefined 常被当作一个全局对象的全局属性来使用。

window.null;          // undefined
window.undefined;     // undefined
null == undefined;    // true
null === undefined;   // false

继续刚开始的那个例子

为了方便，就把前面的代码直接挪过来了。

var str = "hello world";
str.length;              // 11
str.toUpperCase();       // HELLO WORLD

我们看到的代码是上面的样子，其实后台会自动完成下列的处理：

执行到第二行时：

创建 String 类型的一个实例；

在实例上调用指定的属性；

销毁这个实例；

执行到第三行时：

创建 String 类型的一个实例；

在实例上调用指定的方法；

销毁这个实例；

可以将上面的步骤想象成下列 ECMAScript 代码：

// 执行到第二行时
var str = new String("hello world");
str.length;
str = null;

// 执行到第三行时
var str = new String("hello world");
str.toUpperCase();
str = null;

经过此番处理，基本的字符串值就变得跟对象一样啦。而且，上面的步骤同样适用于 Boolean 类型的 Number 类型对应的布尔值和数字值。

嘿嘿，啰嗦了这么多，搞懂了吗？

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

引用类型与基本包装类型的主要区别就是对象的生存期。

使用 new 操作符创建的引用类型的实例，在执行流离开当前作用域之前，会一直保存在堆内存中。而后台自动创建的基本包装类型的对象，则只存在一行代码的执行瞬间，然后立即被销毁。这意味着我们不能为基本类型的值添加属性和方法。

看了上面的原理，再来看例子：

var str = "some text";
str.color = "red";
console.log(str.color);   // undefined

在此，第二行表面上看是为 str 添加了 color 属性，但是仔细回想上面的后台执行的那 3 个步骤，会发现，第二行创建的 String 对象在添加了 color 属性后，被销毁了。执行到第三行时，第三行代码又创建了自己的 String 对象，然而这个对象没有 color 属性。一切都显得那么清晰。

为了与上面的例子形成对比，我们显式地创建基本包装类型的对象，代码如下：

var str = new String("some text");
str.color = "red";
console.log(str.color);     // red

书中有警告：除非绝对必要，否则不要显式地创建基本包装类型的对象，因为这种做法很容易让人分不清自己是在处理基本类型还是引用类型的值。

var value = "25";

var number = Number(value);   // 转型函数
console.log(number);          // 25

var obj = new Number(value);  // 构造函数
console.log(typeof obj);      // object 
console.log(obj);             // Number {[[PrimitiveValue]]: 25}

Boolean 引用类型

书中很严肃地说：理解基本类型的布尔值与 Boolean 对象之间的区别非常重要------当然，我们的建议是永远不要使用 Boolean 对象。

吐槽一下，segmentfault 好像不让上传本地的无聊表情包，所以只好外链过来了。喔草，我刚刚说了什么。。。

Number 引用类型

【MDN】传送门---Number

var num = 1.2345678;

num.toFixed(2);        // 1.23
num.toPrecision(2);    // 1.2
num.toExponential(2);  // 1.23e+0

String 引用类型

【MDN】传送门---String

这个家伙的方法就很多了。

charAt()

concat()

slice()

indexOf()

trim()

toUpperCase()

toLowerCase()

match()

search()

replace()

.........

自己进门里面探索去吧！

Symbol 引用类型（ES 6）

【MDN】传送门---Symbol

额，这个还没怎么用过呢。但是这里还是有一点需要注意下：

var sym = new Symbol();   // TypeError: Symbol is not a constructor

为什么会这样呢？这是因为围绕原始数据类型创建一个显式包装器对象从 ECMAScript 6 开始不再被支持。然而，现有的原始包装器对象，如 new Boolean、new String 以及 new Number 因为遗留原因仍可被创建。

好了，就这样结束吧！

云服务器 GPU云服务器你不知道的javascript 你不知道的javascript上卷你不知道的你不知道

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80279.html

翻译连载 | 附录 B: 谦虚的 Monad－《JavaScript轻量级函数式编程》 |《你不知道

摘要：就像我写书的过程一样，每个开发者在学习函数式编程的旅程中都会经历这个部分。类型在函数式编程中有一个巨大的兴趣领域类型论，本书基本上完全远离了该领域。在函数式编程中，像这样涵盖是很普遍的。原文地址：Functional-Light-JS 原文作者：Kyle Simpson－《You-Dont-Know-JS》作者关于译者：这是一个流淌着沪江血液的纯粹工程：认真，是 HTML...

gaomysion 2019-08-21 17:56 评论0 收藏0
你不知道的javascript(上卷)读后感（二）

摘要：词法熟悉语法的开发者，箭头函数在涉及绑定时的行为和普通函数的行为完全不一致。被忽略的作为的绑定对象传入，使用的是默认绑定规则。使用内置遍历数组返回迭代器函数普通对象不含有，无法使用，可以进行改造，个人博客地址 this词法熟悉ES6语法的开发者，箭头函数在涉及this绑定时的行为和普通函数的行为完全不一致。跟普通this绑定规则不一样，它使用了当前的词法作用域覆盖了this本来的值。...

Ali_ 2019-08-26 10:40 评论0 收藏0
精读《你不知道的javascript（中卷）》

摘要：强制类型转换本章介绍了的数据类型之间的转换即强制类型转换包括显式和隐式。强制类型转换常常为人诟病但实际上很多时候它们是非常有用的。隐式强制类型转换则没有那么明显是其他操作的副作用。在处理强制类型转换的时候要十分小心尤其是隐式强制类型转换。前言《你不知道的 javascript》是一个前端学习必读的系列，让不求甚解的JavaScript开发者迎难而上，深入语言内部，弄清楚JavaSc...

李世赞 2019-08-22 18:09 评论0 收藏0
JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
重读你不知道的JS (上) 第一节三章

摘要：如果是声明中的第一个词，那么就是一个函数声明，否则就是一个函数表达式。给函数表达式指定一个函数名可以有效的解决以上问题。始终给函数表达式命名是一个最佳实践。也有开发者干脆关闭了静态检查工具对重复变量名的检查。你不知道的JS(上卷)笔记你不知道的 JavaScript JavaScript 既是一门充满吸引力、简单易用的语言，又是一门具有许多复杂微妙技术的语言，即使是经验丰富的 Ja...

lavor 2019-08-23 15:04 评论0 收藏0