深入理解JavaScript原生类型与构造函数

本文基于《You Don't Know JS: Types & Grammar》第三章内容，深入探讨JavaScript中的原生类型（Natives）及其构造函数的行为特点。

原生类型概述

JavaScript提供了一系列内置的原生类型构造函数，它们是：

• String()
• Number()
• Boolean()
• Array()
• Object()
• Function()
• RegExp()
• Date()
• Error()
• Symbol() (ES6新增)

这些构造函数看起来像是用来创建对应类型的值，但实际上它们的行为可能与你的预期有所不同。

构造函数与原始值

当我们使用new关键字调用这些构造函数时，实际上创建的是一个对象包装器，而非原始值：

var s = new String("abc");
typeof s;  // "object" 而不是 "string"
s instanceof String;  // true

这种对象包装器包含了原始值，并提供了额外的方法和属性。但大多数情况下，我们不需要直接使用这种构造函数形式。

内部[[Class]]属性

JavaScript中所有typeof返回"object"的值都有一个内部[[Class]]属性，可以通过Object.prototype.toString()来查看：

Object.prototype.toString.call([1,2,3]);  // "[object Array]"
Object.prototype.toString.call(/regex/);  // "[object RegExp]"

对于原始值，JavaScript会自动进行"装箱"操作：

Object.prototype.toString.call("abc");  // "[object String]"
Object.prototype.toString.call(42);    // "[object Number]"

装箱与拆箱

自动装箱

当我们在原始值上访问属性或方法时，JavaScript会自动将其装箱为对象：

var a = "abc";
a.length;       // 3
a.toUpperCase(); // "ABC"

手动拆箱

如果需要从对象包装器中获取原始值，可以使用valueOf()方法：

var a = new String("abc");
a.valueOf();  // "abc"

拆箱也会在需要原始值的上下文中自动发生：

var a = new String("abc");
var b = a + "";  // 自动拆箱
typeof b;       // "string"

构造函数的陷阱

数组构造函数的特殊行为

Array构造函数有一个特殊行为：当只传入一个数字参数时，它会创建一个指定长度的空数组（实际上是设置了length属性的稀疏数组）：

var a = new Array(3);  // 创建一个length为3的空数组
a.length;  // 3
a[0];      // undefined

这种稀疏数组的行为与常规数组不同，容易导致问题：

var a = new Array(3);
var b = [undefined, undefined, undefined];

a.map((v, i) => i);  // [empty × 3]
b.map((v, i) => i);  // [0, 1, 2]

创建真正的undefined数组

如果需要创建真正填充了undefined值的数组，可以使用以下方法：

var a = Array.apply(null, { length: 3 });
a;  // [undefined, undefined, undefined]

布尔值包装器的陷阱

布尔值包装器对象总是"真值"，即使包装的是false：

var a = new Boolean(false);
if (!a) {
  console.log("这永远不会执行");
}

最佳实践建议

1. 优先使用字面量形式：对于字符串、数字、布尔值、数组、对象和正则表达式，都应该优先使用字面量语法。

2. 避免使用构造函数：除非有特殊需求，否则不要使用new String、new Number等构造函数形式。

3. 特殊构造函数的合理使用：

   • Date()和Error()没有字面量形式，必须使用构造函数
   • RegExp()可用于动态创建正则表达式
   • Function()构造函数应谨慎使用

4. 数组构造函数的注意事项：永远不要使用new Array(数字)形式创建稀疏数组。

总结

理解JavaScript原生类型及其构造函数的行为对于编写可靠的代码至关重要。大多数情况下，我们应该使用字面量形式创建值，只有在特定场景下才考虑使用构造函数。特别是数组构造函数的特殊行为和对象包装器的真值特性，都是容易导致bug的陷阱，需要特别注意。