JavaScript 基本类型与基本类型包装对象

问题思考

阅读以下代码：

const str1 = 'str1';
const str2 = new String('str2');

typeof str1; // string
typeof str2; // object

在没理解JavaScript基本类型和基本类型包装对象之前你是否也会觉得以上代码的结果很奇怪呢？

基本类型

基本类型（基本数值、基本数据类型）是一种既非对象也无方法的数据。在 JavaScript 中，共有7种基本类型：string，number，bigint，boolean，null，undefined，symbol (ECMAScript 2016新增)。

所有基本类型的值可以被替换，但不能被改变。变量会被赋予一个新值，而原值不能像数组、对象以及函数那样被改变。

// 使用字符串方法不会改变一个字符串
let str = 'str';
str.toUpperCase(); // str: str

// 使用数组方法可以改变一个数组
let arr = [];
arr.push('element'); // arr: ['element']

// 赋值行为可以给基本类型一个新值，而不是改变它
str = str.toUpperCase();       // str: STR

基本类型包装对象

JavaScript 的基本类型包装对象
除了 null 和 undefined之外，所有基本类型都有其对应的包装对象：

String 为字符串基本类型包装对象。
Number 为数值基本类型包装对象。
BigInt 为大整数基本类型包装对象。
Boolean 为布尔基本类型包装对象。
Symbol 为字面量基本类型包装对象。

这个包装对象的valueOf()方法返回基本类型值。

基本类型与基本类型包装对象的区别与联系

区别

基本类型的值是保存在栈内存中的简单数据段，它们是按值访问的，没有属性和方法。
引用类型的值是保存在堆内存中的对象，它的值是按引用访问的，对象是可以拥有属性和方法的。

联系

字面量定义和直接调用基本类型包装对象方法(没有通过 new 生成基本类型对象实例)的变量都是基本类型变量。

// 1.字面量定义
const str1 = 'str1';
// 2.调用基本类型包装对象方法(没有通过 new 生成基本类型对象实例)
const str1 = String('str2')

当基本类型变量需要调用一个基本类型包装对象才有的方法或者查询值的时候(基本类型是没有这些方法的)，JavaScript 会自动将基本类型变量转化为基本类型包装对象并且调用相应的方法或者执行查询，执行完毕就会立即被销毁。

const str = 'str1';
str.toUpperCase();

参考文献：

• MDN·原始数据
• MDN·JavaScript 数据类型和数据结构